Navigation Logo

Note: This option requires the Menu Plus add-on in GP Premium.

You can upload a logo inside your navigation by going to Customize > Layout > Primary Navigation.

See this article if you wish to display your site title instead of navigation logo.

The Navigation Logo Position option has 3 choices:

  • Sticky – your navigation logo will only appear in the sticky navigation
  • Static – your navigation logo will only appear in your static navigation – meaning it’s not sticky.
  • Sticky + Static – your navigation logo will appear in both your sticky and static navigation.

The layout demonstrated above can be achieved by following the steps in the Navigation as a Header article.

Float Navigation Logo Outside Container

The steps above show you how to use the navigation as header. In some cases, users would like to float the logo outside the container.

This can also be achieved with some extra CSS:

    1. Follow the steps above to use navigation as header.
    2. Set your navigation logo to be absolute with CSS so it’s not confined to the container:
.main-navigation .site-logo.navigation-logo {
    position: absolute;
    left: 0;
    top: 0;
}
    1. Set the height of the image to auto (or the height in px of your preference):
.main-navigation .site-logo.navigation-logo img {
    height: auto;
}

This is the basic result:

Float logo outside container