Site Header

This page covers all of the available options that relate to the site's header area of the site (navigation bar). This is where your site logo, main navigation and social icons are found.

  • Site Header Layout - You can choose ten different layouts for the navigation bar, including ones with a centred logo, and split navigation menus. We recommend viewing the chapter on Creating a Navigation Menu first before configuring this, otherwise, the navigation areas will appear empty.

  • Navbar Height (Fixed) - This setting refers to the height of the navigation bar in its fixed state. This is when it sticks to the top of the browser window while the user scrolls through the page. The value is in pixels (px).

  • Navbar Side Padding (Fixed) - This setting refers to the amount of spacing at both sides of the navigation bar in its fixed state. The higher the value, the closer the items will be to each other. The value is in pixels (px).

  • Navbar Height (Transparent) - This setting refers to the height of the navigation bar in its resting state. This is when the user is at the very top of the homepage when a slider is visible, it overlays the slider and becomes transparent. The value is in pixels (px).

  • Navbar Side Padding (Transparent) - This setting refers to the amount of spacing at both sides of the navigation bar in its transparent state. The value is in pixels (px).

  • Logo Height - Use this setting to adjust the size of the logo. This assumes you have uploaded a logo in the Site Identity > Logo setting in the customizer. This setting affects both the normal and transparent logos. The value is in pixels (px).

  • Menu Item Spacing - Use this setting to adjust the amount of spacing between each of the top-level menu items in your navigation. The value is in pixels (px).

  • Icon Size - Use this setting to adjust the size of the icons that appear in the header. This includes the search icon, menu icon, and all of the social icons. The value is in pixels (px).

  • Icon Spacing - Use this setting to adjust the amount of spacing between each icon. The value is in pixels (px).

  • Display Tagline? - Toggle this setting to show or hide your site's tagline underneath the logo (or site title if no logo is used). The tagline text can be edited in Site Identity > Tagline.

  • Display Search Icon? - Toggle this setting to show or hide the search icon in the header. If this is turned off, we recommend at least adding a search widget somewhere on your site so that visitors can search for specific content.

  • Display Menu Icon? - Toggle this setting to show or hide the menu icon (hamburger icon) in the header. We recommend keeping this turned on if there's no visible navigation menu in the header. This setting doesn't affect mobile displays.

  • Social Media Profiles - Use these fields to configure the URLs to your social media channels. These will appear as icons in the header. Leaving a field blank will remove the icon completely. Currently, there are five social media channels that you can link to:

    • Facebook

    • Twitter

    • Instagram

    • LinkedIn

    • YouTube

Last updated