In the Header settings page, you can modify the header settings for your website.

Change the Header Settings

Follow these steps to access the style settings for the global header:

  1. Login to the Site Manager. 

  2. In the menu, select to expand the Design settings (see the figure below).

  3. Select the HEADER item to display the header settings in the main panel.

Header Style

In the header style section, you can change the background, border, and other styling of your global header.

Header Background

Background type: Select the drop-down and choose a light, dark, or other type of background.

Header Border

Select the small + button to expand the Border section. Then, adjust the Border Width, choose a Border Color, and choose the type of Box Shadow for your header.  You can also enter the hex color code into the Border Color field.

Header Alignment

Select the small + button to expand the Alignment section. Then, select the button for Left, Centered, or Right alignment (or use the drop-down).

Sticky Headers

Change these settings to keep the header visible when the user scrolls down the page. By default, the header will be hidden when the user moves down the page.

Select the small + button to expand the Sticky section. Then, choose the Sticky Header setting that matches your preference for mobile and all devices. Also, choose which Mobile Sticky Position (top or bottom).

Header Inner Container

In this section, you can change the background, border and styling of your global header inner container.

By default, the inner container is disabled. To enable the inner container, select the toggle switch to ON.

Container Background and Container Border

Select the small + button to expand the Container Background section. Then, choose the Background Type from the drop-down. 

Select the small + button to expand the Container Border section. Then, increase the Border Width to 1 or greater and choose a Background Color from the color picker. You can also enter the hex color code into the Background Color field.

Header Toolbar

In this section, you can change the position, arrangement, and styling for your global toolbar.

Toggle

By default, the toolbar is enabled. To disable enable the toolbar, select the toggle switch to OFF.

Toolbar Background and Border

Select the small + button to expand the Toolbar Background section. Then, choose the Background Type from the drop-down and also choose a Background Color using the color picker.

Select the small + button to expand the Toolbar Border section. Then, increase the Border Width to 1 or greater and choose a Border Color from the color picker. You can also enter the hex color code into the Border Color field.

Toolbar Height and Font Size

Select the small + button to expand the Toolbar Height section. Then, use the - and + buttons to change the value for the toolbar height.

Select the small + button to expand the Toolbar Font Size section. Then, choose one of the buttons to specify Mobile Size, Tablet Size, or Desktop Size. Use the - and + buttons to further adjust the value for the font size.

Toolbar Visibility and Text Style

Select the small + button to expand the Toolbar Visibility section. Then, make your device/visibility selections for both the Left Toolbar and the Right Toolbar.

Select the small + button to expand the Toolbar Text Style section. Then, choose a Text Color from the color picker. You can also enter the hex color code into the Text Color field. Also, choose a different from the Text Style drop-down if you would prefer not to have uppercase text.

Header Inner Container Elements

In this section, you can change the position, arrangement, and styling for global elements inside your header.

Toggle

By default, the inner container elements are enabled. To disable these, select the toggle switch to OFF. Also choose which Alignment you want to apply to all of the elements within the inner container.

Inner Element Height and Font Size

Select the small + button to expand the Inner Element Height section. Then, use the - and + buttons to change the value for the height of the elements.

Select the small + button to expand the Inner Element Font Sizes section. Then, choose one of the buttons to specify Mobile Size, Tablet Size, or Desktop Size. Use the - and + buttons to further adjust the value for the font size.

Inner Element Visibility and Text Style

Select the small + button to expand the Inner Element Visibility section. Then, make your device/visibility selections for both the Left Toolbar and the Right Toolbar.

Select the small + button to expand the Inner Element Text Style section. Then, choose a Text Color from the color picker. You can also enter the hex color code into the Text Color field. Also, choose a different from the Text Style drop-down if you would prefer not to have uppercase text.