All Collections
Website editor
Design
How to Customize the Style of the Navigation Menu
How to Customize the Style of the Navigation Menu

Learn about customizing your website's header section

Updated over a week ago

A header is the uppermost section of your website. It can also be called a menu bar, or navigation menu. If you can't see the header section, all your website pages are likely hidden from the navigation menu.

Click on the header section, to reveal its settings:

The header section settings in Hostinger Website Builder

Edit Navigation

Click on the header section, and select Edit navigation: it'll expand the Pages and navigation panel on the left. Here, you can add, rename, sort, hide, or remove menu items.

Change Logo

Click on the header section, and select Change logo. Here, you can show, hide, or replace the logo, as well as change its size or position.

Shopping Bag

This option is visible only after enabling the eCommerce platform on your website.

Click on the header section, and then click on the shopping bag icon. Here, you can enable or disable the shopping bag as well as change its title and size.

Style

Click on the header section, and then click on the brush icon. Here, you can change the style of the header section itself, or of the social media icons that are added to the header.

Header

From the dropdown, select Header, and you'll find the following options:

  • Header background: change the header background color

  • Transparent header: if you make the header transparent, it inherits the background of the below section

  • Text font: change the header text font

  • Text color: change the header text color; you can set two colors: regular and hover

To change the header text size, go to the global text style settings 💡

Social icons

From the dropdown, select Social icons, and you'll find the following options:

  • The toggle button to enable social media icons in the header

  • Add new link: add links to your profiles on various social media platforms

  • Icon size: change the size of the icons

  • Icon color: change the color of the icons; you can set two colors: regular and hover

Layout

Click on the header section, and then click on the cogwheel icon. Here, you can find the following options:

  • Make header sticky: if you make the header sticky, the menu bar is always pinned at the top of the page and is visible to users even when they scroll down the page

  • Menu position: change the menu position (alignment)

  • Menu item spacing: change the menu item spacing

  • Padding: change the top/bottom padding (height) of the header

And that's it! Now you know how to personalize the appearance of your website's header section 😊

Did this answer your question?