# Header and navigation

## Navigation

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.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDdvM0U_YRPnAUOp_6%2F-MNDeVBHNpjB3t7AZMud%2Fimage.png?alt=media\&token=d506998e-6a79-46b4-a0e4-2e7925983f0b)

### Hide page from navigation

If you want to hide a page from the navigation go to the Settings section for that page and check **Hide In Navigation** option.

<div align="left"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNE9ywLrPdDaZ5SjUlC%2F-MNEBJ1ZTWwGXBpv-FiA%2Fimage.png?alt=media&#x26;token=9f5c1835-3e20-4781-be81-aac61eb53e2a" alt=""></div>

## Custom Navigation

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.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDevZxg2qexMOYpGsy%2F-MNDfvszmd4As9lxHLyb%2Fimage.png?alt=media\&token=58bc6f69-8ec8-4e8a-9e8a-49e39ff5834c)

Here you can add two different types of Navigation items, [Navigation Item](#navigation-item) and [Big Navigation](#big-navigation)

<div align="center"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDevZxg2qexMOYpGsy%2F-MNDgL-ZUzYC8jy4hUpf%2Fimage.png?alt=media&#x26;token=240969a4-deaf-445b-8f10-cd536f281268" alt=""></div>

### Navigation Item

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.

<div align="left"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDevZxg2qexMOYpGsy%2F-MNDhlrfKF6dm-9Hi5BU%2Fimage.png?alt=media&#x26;token=3e581937-3b18-4cab-98aa-339b82946aac" alt=""></div>

<div align="center"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDevZxg2qexMOYpGsy%2F-MNDhuhq-q6bYrW5Vz74%2Fimage.png?alt=media&#x26;token=c35d0d2b-56d3-4e35-8471-857b21ccd0aa" alt=""></div>

### Big Navigation

The big navigation allows you to use all widgets available in the [Grid](https://docs.iglootheme.com/widgets/grid). The columns will be show when hovering over the the Big Navigation item.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDiqbDiltyfaRjQcRj%2F-MNDlYZkoeWumMHsLUWz%2Fimage.png?alt=media\&token=6d667798-ba37-47b8-8704-feea35935e78)

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDiqbDiltyfaRjQcRj%2F-MNDld_ZbPqwoGYkKiMh%2Fimage.png?alt=media\&token=fce916ea-a1a9-4417-a6ee-e5833aecfe48)

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDiqbDiltyfaRjQcRj%2F-MNDlN7iO2spCX__lNg6%2Fimage.png?alt=media\&token=45f1194a-59f3-4df2-bc6d-883a9e681deb)

### NB: Unpublished Navigation items remain in the rendered Custom Navigation

When using the custom navigation you need to manually remove any items that you do not want to show if the associated link is unpublished.

The underlying functionality of `Umbraco.Cms.Core.Models.Link` returns `null` for both `nothing selected` or if the selected node is `unpublished`. (we don’t have a udi to be able to check isPublished)

Therefore we still have the item rendered in the navigation with `#` as the url.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN83_a4SxUzhnC6dsXE%2Fuploads%2Fgit-blob-e35b7ced48f4159547f4555c635331f3be1696b3%2Fcustom%20navigation%20unpublished%20links.png?alt=media)

## Navigation Buttons

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.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDqUiXJIkZLQ3D2klB%2F-MNDrByrPrj-hPPChco1%2Fimage.png?alt=media\&token=e6692bb5-8dad-47e7-a25b-f27e4dc0a884)

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNDqUiXJIkZLQ3D2klB%2F-MNDrMdhwiDT8vrXY2H-%2Fimage.png?alt=media\&token=a8f619e5-fa90-4a8d-b8e1-6c232b910f72)

## The Letter Casing for Main Navigation

The letter casing for the main navigation can be updated by selecting the desired letter form from the radio list.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN83_a4SxUzhnC6dsXE%2Fuploads%2Fgit-blob-e814ff1ad49c37876bb6dd350af46b74925dcb67%2Fimage%20\(245\).png?alt=media)

## Sub Header

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.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNE57mKsHg3dZ0Jeov9%2F-MNE7ApUqxkc-XROa_Qk%2Fimage.png?alt=media\&token=80973906-83a0-4ac5-94ea-b2a1546ed995)

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNE57mKsHg3dZ0Jeov9%2F-MNE8cVrXMjCyBRdn7LL%2Fimage.png?alt=media\&token=ee8a58da-c49b-4ed0-b6d9-61da2fc8808b)

The sub header text color can be updated by changing the hex code in the Custom Text Color field.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MN83_a4SxUzhnC6dsXE%2Fuploads%2Fgit-blob-711907001ef218d9a02e1cf7b6e14fa8fb9c54a6%2Fimage%20\(244\).png?alt=media)

## Search

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.

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNE57mKsHg3dZ0Jeov9%2F-MNE9GLq9qpL9kwI8bJs%2Fimage.png?alt=media\&token=e96df862-b43d-447d-8308-f4754b20a45c)

## Header

The header has its own section in the theme node, there you can select logos, navigation position, logo padding and more. See [Theme customization](https://docs.iglootheme.com/getting-started/setting-up-your-theme) for more info.

### Hide Header

You can hide the header on a specific page by going to the page settings section and checking the **Hide Header** option.

<div align="left"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNE9ywLrPdDaZ5SjUlC%2F-MNEBsUsFXl_E6cOZdL6%2Fimage.png?alt=media&#x26;token=aaa4992d-e000-40c5-a7d0-7e0028d6d1e8" alt=""></div>

### Transparent Header

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](https://docs.iglootheme.com/widgets/hero). 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.

<div align="center"><img src="https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNED4CvWQloJblUlR53%2F-MNEEX1q8u5kJimRJNWu%2Fimage.png?alt=media&#x26;token=c24e04eb-b81e-41ed-9a83-107341bb4ba0" alt=""></div>

![](https://1747244357-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MN83_a4SxUzhnC6dsXE%2F-MNED4CvWQloJblUlR53%2F-MNEGEcCWcahIC1KxmjL%2FKapture%202020-11-28%20at%2015.32.01.gif?alt=media\&token=3ca6294d-e05b-49c3-8b78-02454118563e)
