Preview of the settings at the top center. Below the visual, you’ll find the header configuration settings.
Structure
Top Navigation and Main Navigation…
In the main navigation bar, you usually find the logo, a menu, and an action button.
In the top navigation bar, you usually find a language selector and the search icon.
The main navigation bar is therefore more comprehensive than the top navigation bar.
However, both do not necessarily need to be configured: if all the information you want to display and need can fit in one place, only configure the main navigation bar.
a - Top Navigation
- Drag and drop to position the available elements (languages, search, main and secondary menus, primary and secondary logos, action button menu) to the left, right, or center, and arrange their order.
b - Main Navigation
- Drag and drop to position the available elements (languages, search, main and secondary menus, primary and secondary logos, action button menu) to the left, right, or center, and arrange their order.
Settings
- Variants selector → choice of header display style (framed, separator line, none, etc.)
- Depending on the choice, set the border thickness and radius, or the thickness and color of the separator.
- Icon variants selector → line thickness of the “magnifying glass” icon (for search), the “hamburger” icon (for the mobile menu), and the “cross” icon (to close the mobile menu and search).
En fonction de la position que vous aurez choisie pour les différents éléments (menu principal menu bouton d’action, recherche, etc.) les paramètres ci-dessous varient : si vous avez placé votre recherche dans la navigation supérieure, inutile de la configurer dans la navigation principale par exemple.
a - Top nav
- General
- Choice of font for the menu items
- Choice of icon color in the header (submenu arrows, search magnifying glass, etc.)
- Choice of text color on hover, on focus, and for the active page
- Choice of navigation bar background color (depending on the selected general variant)
- Set the logo size (width and height in pixels)
- Choice of dropdown menu icons
- Sub-navigation
- Choice of dropdown menu display style
- Choice of font for the submenu items
- Choice of text color on hover, on focus, and for the active page
- Choice of dropdown menu border thickness and radius
- Choice of submenu border and background color
- Search
- Choix du style de la police de la recherche
- Choix de l’épaisseur et de l’arrondi de la bordure
- Choix de la couleur de fond et de bordure du champ de recherche
- Call to action
- Choice of font style
b - Main nav
- General
- Choice of font for the menu items
- Choice of icon color in the header (submenu arrows, search magnifying glass, etc.)
- Choice of text color on hover, on focus, and for the active page
- Choice of navigation bar background color (depending on the selected general variant)
- Set the logo size (width and height in pixels)
- Choice of dropdown menu icons
- Sub-navigation
- Choice of dropdown menu display style
- Choice of font for the submenu items
- Choice of text color on hover, on focus, and for the active page
- Choice of dropdown menu border thickness and radius
- Choice of submenu border and background color
- Search
- Choice of font style for the search
- Choice of border thickness and radius
- Choice of background and border color for the search field
- Call to action
- Choice of font style
