Navigation as a Header

Using navigation as a header as seen above is one of the most popular and requested layouts currently. Starting in GP Premium 1.8, you can find this option underLayout > Header:

Basic

1. Make sure there is a site title or/and a logo in addedSite Identity.
2. Check to activate Use Navigation as Header option above.
3. Adjust the logo and navigation height by changing theMenu Item Height.

Sticky Navigation with Height Transition

To create transition effect above, first you need to complete theBasicsteps above, then follow the additional steps below:

1. SetSticky NavigationtoDesktop onlyorBoth.
2. SetTransitiontoNone.
3. SetStickyNavigationHeightto a number smaller than step 3 above.

Merge with Header Elements

We also have the option to merge the header navigation with a page hero in ourHeader Elementas seen above. Follow theBasicsteps first, then theHeight Transitionsteps if it’s desired, then we are ready to merge with the options detailed in theTransparent Header and Navigationarticle.

Different Logo and Navigation Colors

If you want to use a different logo and navigation colors to match a specific page hero, you can do so by uploading the logo inNavigation Logoand change theNavigation Colorsunder theSite Headertab for that specific page hero.

Adding the Site Tagline

The site tagline is removed by default when this option is activated as there typically isn’t enough space for it. However, you can add it back in using thisPHPsnippet:

add_filter( 'generate_site_title_output', function( $output ) {
$tagline = '<div class= "site-description" >Your tagline here</div>';

return $output. $tagline;
} );