All Collections
Website Builder
Design
Website Builder: How to Customize the Style of the Navigation Menu
Website Builder: 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 in Hostinger Website Builder, 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

There are four main options:

Edit header

Click on Edit header to customize the following:

  • Layout:

    • Make header sticky: this way, the menu bar will always be pinned at the top of the page and is visible to users even when they scroll down the page

    • Menu position

    • Menu item spacing

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

  • Logo — show, hide, or replace the log; change its size and position

  • Style — change the style of the header or social icons

Edit navigation

Click on the header section and then on the Edit navigation icon: it'll expand the Pages and navigation panel on the left.

Here, you can add, rename, sort, hide, or remove menu items.

Edit shopping bag

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.

NOTE: This option is visible only after enabling the eCommerce platform on your site

Edit styles

Here, you can change the style of the following (choose from the dropdown):

Header:

  • Header background color

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

  • Text font

  • 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:

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

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

  • Icon size

  • Icon color: you can set two colors — regular and hover

  • Learn more: How to Add Social Media Icons 💡

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

Related Articles
Website Builder: How to Customize a Website Template
Website Builder: How to Resize Elements and Sections
Website Builder: Shopping Bag Settings
Website Builder: How to Customize Text Style in the Online Store
Website Builder: How to Customize the Website's Style
Did this answer your question?