Skip to the main content.

Step 3: How to Add Your Logo and Navigation

In this tutorial I want to give you a quick breakdown of how to add your logos and main navigation.

In this tutorial, I'm going to help you get your logo and main navigation set up plus show you some awesome features of the Global Header module.

1. Open any page in the editor

This is the best place to access the Global Header module. Just make sure you've selected a page using your current child theme. Then open the Contents tab and click the Global Header module. This will open one more screen where you'll need to click it again.

 

select-global-header

 

2. Click the Start Here section

It's here where you will add your logo.  You can scroll past many of the settings which we will cover in another tutorial to get to the Logo sub-section.

 

gh-logo

3. Upload your Logos

You heard that right. Logos, plural!  There is a place to upload two logos.  This gives you the option to create 2 distinct navigation styles. One to works great on light backgrounds and another to look great on dark backgrounds. You'll have full control on each page to set the two styles.

In this example, you'll see I'm using the white logo for the "Standard" (dark background) and a color logo for the "Sticky" and (light background).

 

gh-logos

 

4. Create Your Navigation Menu

To add your navigation menu you'll want to go into the Navigation Elements section of the module.

 

gh-nav-elements

At the very top, you'll see where you can select one of your existing menus or create a new one.

 

gh-select-menu

5. Publish Your Changes

Once you're done configuring the Global Header, simply publish your changes.  

I go into quite a bit more detail in the video above which I suggest watching.