How to Add a Logo to Extra’s Secondary Menu

Not long ago I created and gave away our first Free Extra Category Layout Pack. The response was great and so I’ve begun work on my next one: an Extra Category Layout for a video blog. In the process of creating it I realized that something I did on the demo site might be something the community would also like to know how to do. How to add a logo to Extra’s secondary menu (and hide the primary menu altogether).

Concept & Inspiration

I got the idea when looking for interesting video websites to draw on for inspiration. I really liked how the hulu website had a really unobtrusive, minimal menu at the top of their page and then got visitors right into their content–which is what everyone wants anyways!

I quickly realized that with just a little tinkering I could have a very similar look on Extra. Here’s how!

Preparing Your Design Elements

For this tutorial you will likely need a smaller version of your logo. The dimensions I have used in my example are 190px by 25px. You may even choose to go smaller than that depending on your logo and what it looks like at different scales.

Once you’ve created this version of your logo you will want to upload it to your website so you have easy access to it later.

How to Add a Logo to Extra’s Secondary Menu

The first thing you will want to do is hide your primary menu. Navigate in your WordPress admin to Extra > Theme Options and scroll down the general tab until you get to the custom CSS panel.

Copy and paste the following css there:

#main-header {
display: none;
}

#main-header-wrapper {
display: none;
}

Click the green “Save Changes” button and refresh the frontend of your website. If all of your other settings are still set to default, your header will now likely look like this.

Next, go to Theme Customizer > Header & Navigation Settings > Header Elements Settings and un-tick the box next to “show trending bar”. Click the blue “Save & Publish” button before exiting the Theme Customizer.

It’s now time to create your actual menu by going to Appearance > Menus. To get started, click the blue link text “create a new menu”.

Name the menu whatever you would like and be sure to tick the check box at the bottom of the screen under “Menu Settings” so that this menu will be displayed as the secondary menu.

Now you can populate your menu with all of the links you want to display there. In my example I have added all of my categories there.

Finally, add a custom link.

In the URL field simply put the homepage domain of your website. This will, after all, become your “home” button. Then, in the Navigation Label field place the following line of HTML.

<span><img src="YOUR LOGO IMAGE LINK"></span>

Replace the text “YOUR LOGO IMAGE LINK” with the link to your logo image file from the media library. If you’re unsure how to get that link, go to Media > Library and click on your logo image.

When the Attachment Details modal pops up you will see the URL in the URL field. Copy it and paste it into the indicated space in the HTML code above.

When your custom link is complete, save your menu and refresh the frontend of your website. You should now have a slim, minimal header with your logo placed inside Extra’s secondary menu.

What Other Extra Tutorials Are You Interested In?

I know that there are a ton of passionate Extra users in our community with all kinds of Extra specific tutorial and freebie requests. This is your chance to ask and have them added to our content production queue! Let us know in the comments below what you’d like us to cover in the future and I’d be happy to write it down and then write it up in a future post.