Display a Top Bar

Article sections

Visitors of your website may find it useful to spot practical information in the upper part of the front page. They might find here all they need to get in touch with your business.

Thus, Materialis PRO includes some options to set a top bar for the front page and customize it accordingly.

Go to the Customizer -> Navigation -> Top Bar.

You will find 4 subsections for the top bar:

Top Bar Display

In this subsection, you decide whether to display a top bar on the front page or not.

By checking the checkbox to Show Top Bar, you will include the top bar element in the front page and you can start customizing it.

Top Bar General Options

From here, you define the overall aspect of the top bar.

Background Type

The background can be set to:

Color – choose the color you want, from the color palette (and adjust parameters such as brightness, saturation and shade)
Gradient (choose the gradient you want, from the list of available gradients).

Background Height

From here, you define the height of the top bar background, which equals the top bar “thickness”.

Show Bottom Border

For design purposes, you might want to clearly delimit the top bar from the rest of the page. In this case, you will enable the option to Show Bottom Border.

Bottom Border Color

If you have activated the option to show a bottom border, you might want to apply a certain color to it, in accordance with the overall design.

Select the color you want from the panel containing the color palette.

Note that the bottom border color will only be visible if you set it to a different nuance than the rest of the front-page background color.

Bottom Border Thickness

A supplemental option for the top bar is to decide upon a certain thickness of the bottom border.

Also, the bottom border color will be more visible if you set a greater thickness of this border.

Top Bar Left Area

Type of top bar left area

None

If you select None for the left area of the top bar, no element will be displayed here. This will balance with the inclusion in the top bar right area of the items you find most useful for the visitors.

Information Fields

If you select this type of elements to include in the top bar left area, there will be some additional options for customizing them.

Click on Info Options and a panel will open with the customization options:

Select the text color for the information items that will be displayed in this area
Select the icon color for the information items that will be displayed in this area
Choose to display or not display a certain field – that is, the field represents the space dedicated to only one item (icon + text)
Select, from the list of available icons, the one that best represents the item in that field
Fill in the dedicated space of a field with the text of your own

Social Icons

Choose to integrate social icons in the top bar left area, and you’ll have the possibility to customize them according to your design.

Click on Social Icons Options, and a panel will open with the customization features:

Select the color for the icon representative of a certain social network; choose the suitable color from the color palette the theme puts at your disposal;
Select the color of the icon representative of a certain social network, when visitors hover over that element with the mouse;
Decide whether or not a certain item will be displayed in this area, by checking the checkbox to Show Icon;
Choose the most suitable icon for each element in this area;
Provide the link to the corresponding account in the social network, for each element in this area.

Select the option to integrate a menu in the top bar left area, and you will have additional customization options for the respective menu.

Click on Menu Options and a panel will expand with customization features:

Choose the link color for the elements composing the menu, in normal state
Choose the link color for the elements composing the menu, when hovering over those elements with the mouse
Choose the color for the links in the menu – that have already been visited

Text

If you choose this type of elements to include in the top bar, click on Text Options and a panel will expand with further customization possibilities:

Text color – define the color for the text you will include in this top bar area
Text – write down the text you will include in this top bar area

Top Bar Right Area

Type of top bar right area

None

If you select None for the right area of the top bar, no element will be displayed here. This will balance with the inclusion in the top bar left area of the items you find most useful for the visitors.