Header and navigation
Last updated
Last updated
Every piece of content you create directly under the Start page will automatically be added to the default navigation menu. If you have content items with sub-pages, these will be added as a dropdown in the menu.
If you want to hide a page from the navigation go to the Settings section for that page and check Hide In Navigation option.
In some cases, you might want to make changes to the automatically created navigation menu. This can be done by using the Custom navigation feature.
Go to your Site node and scroll down to the Navigation section.
Here you can add two different types of Navigation items, Navigation Item and Big Navigation
The navigation item looks like the default navigation, you can also nest navigation items to create a dropdown when hovering over the first navigation item.
The big navigation allows you to use all widgets available in the Grid. The columns will be show when hovering over the the Big Navigation item.
To add buttons to your navigation open your Site node and scroll down to the Navigation section. Here you can add one or more buttons.
The letter casing for the main navigation can be updated by selecting the desired letter form from the radio list.
The sub header can be activated on the Site node in the navigation section. Start by checking the Enable Sub Header. You can then add items to the left or right sub header area. You can add icons and icon color. Link is optional but only links will be added to the mobile navigation where the sub header is hidden. You can nest items to create dropdown list just like the main navigation.
The sub header text color can be updated by changing the hex code in the Custom Text Color field.
To add the search button to your header simply create the Search node under your site. Make sure to check the Hide in Navigation option on the Search node, this will only display the search icon. The search is included when you install Igloo, if you want to remove the search just delete the Search node.
The header has its own section in the theme node, there you can select logos, navigation position, logo padding and more. See Theme customization for more info.
You can hide the header on a specific page by going to the page settings section and checking the Hide Header option.
This option will present the header with a transparent background when the page first loads, when scrolling down the header background will be filled in. This settings looks great with the Hero widget. You can also select the color for the transparent header to get the best contrast with your first widget. To activate the transparent header on a page go down to the settings section for that page. Enable the transparent header and select a color.