Header

In this section, you can precisely configure the visual appearance of your navigation bar and its toggle button. The various dropdown menus allow you to adjust colors, spacing, text sizes, as well as the presentation of the logo or brand.

🎨 Color settings These options let you modify all the main colors used in your navigation bar:

• Background color: changes the background of the navigation bar.

• Text color: adjusts the color of text elements.

• Hover color: changes the color of a link when you hover over it.

• Disabled color: used for inactive or non-clickable elements.

• Active color: highlights the currently selected item.

• Brand color: customizes the color of your site’s logo or name.

• Brand hover color: changes the brand color when the mouse hovers over it.

• Toggle border color: styles the border of the mobile menu toggle button.

📦 Internal spacing (padding) These settings control the inner space of elements to give room and structure the interface:

• Horizontal padding: space on the left and right inside the bar.

• Vertical padding: space on the top and bottom of the bar.

• Navigation links padding (horizontal): space around each link in the menu.

🔘 Toggle style (mobile menu) The toggle is the button that opens or closes the menu on small screens. You can customize its appearance:

• Toggle vertical padding: space above/below inside the button.

• Toggle horizontal padding: space left/right inside the button.

• Border radius: allows rounding the button’s corners (more or less rounded).

• Font size: adjusts the size of text or icons inside the toggle.

🏷️ Brand style (logo or site name) These options allow you to customize the logo or text representing your site in the navigation:

• Brand vertical padding: space above and below the brand.

• End margin: space between the brand and other elements (links, toggle, etc.).

• Font size: changes the size of the text displaying the brand name.