Display a Top Bar

Article sections

    For users in a hurry, some quick information in the top bar might be useful. Especially if they have already got familiar with your brand and do want quick contact info or find you in social media right off the bat.

    In the customizer, go to Navigation -> Top Bar.

    The top bar is displayed like this:

    TOP BAR DISPLAY

    Leave the checkbox unchecked, for no top bar at all:

    If you choose to benefit from this option, check the checkbox Show Top Bar. Once the feature activated, there are some further options for customizing the top bar. As a result, you can match its style to the header background design and colours, for coherent branding.

    TOP BAR GENERAL OPTIONS

    Background Type (you have to choose one of the 2 options):

    • Color (you give a solid color to the top bar)
    • Gradient (you apply a gradient to the top bar, selecting from a wide range of available gradients)

    Background Height (from here, you adjust the height of the top bar).

    Show Bottom Border (if you check this checkbox, a border clearly delimiting the top bar from the header will display)

    • Bottom Border Color (select the preferred color for the bottom border)
    • Bottom Border Thickness (adjust the border to a thicker or a thinner shape)

    TOP BAR LEFT AREA/TOP BAR RIGHT AREA

    In each of these areas, you can include specific elements, as follows:

    • Information Fields (click on Info Options to display the customization panel)
      • Icon
        • change the icon to one of your choice
        • Icon Color (select the preferred color for your icon)
      • Text
        • fill in with the text corresponding to your e-mail, physical address, etc.
        • Text Color (select an appropriate color for the text you write here)

     

    • Social Icons (click on Social Icons Options, to open the customization panel)
      • Icon
        • change the icon to one of your choice
        • Icon Color (select the preferred color for your icon)
        • Icon Color on Hover (this is the color of the icon when hovering over with the mouse)
      • Link
        • Fill in the empty space with the link towards your Facebook group, Facebook page, Twitter account, etc.

     

    • Menu – to insert a menu in the top bar, go first to the Menus section (*details in the section about Menus)
      • Menu Colors
        • Link Color (this is the color displayed when clicking the link)
        • Link Hover Color (this is the color displayed when hovering over the link with the mouse)
        • Link Visited Color (this is the color displayed when a user has already visited a link)

     

    • Text
      • Text Color (select a color for the text you insert here)
      • Text (write in the empty space the text that represents your business)

     

    Related Articles