Navigation as a Header

Using navigation has a header as seen above is one of the most popular and requested layouts currently. This can be done quiet easily using GP Premium and the detailed steps below.

Basic

  1. Upload your logo to Navigation Logo.
  2. Set the Navigation Location to either Below Header or Above Header.
  3. Set the Navigation Alignment to Left or Right depending on where you want the logo.
  4. Set the Navigation Logo Position to Sticky + Static.
  5. Increase or decrease the logo and navigation height by changing the Menu Item Height.
  6. Remove the header that is no longer used using the Layout Element module. Simply create a new Layout Element, select Site Header under Disable Elements, then select Entire Site under Display Rules.

Sticky Navigation with Height Transition

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

  1. Set Sticky Navigation to Desktop only or Both.
  2. Set Transition to None.
  3. Set Sticky Navigation Height to a number smaller than step 5 above.

Merge with Header Elements

We also have the option to merge the header navigation with a page hero in our Header Element as seen above. Follow the Basic steps first, then the Height Transition steps if it’s desired, then we are ready to merge with the options detailed in the Transparent Header and Navigation article.

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 in Navigation Logo and change the Navigation Colors under the Site Header tab for that specific page hero.