How to Customize The Header and Navigation

by Matt Giovanisci | Last Updated: November 8, 2019
Change Navigation

NOTE: There is no support offered to use this plugin. You’ll need to know how to code in HTML, CSS, and PHP. Code at your own risk!

I tried to make it dead simple to customize the navigation menu and logo. And the header is responsive, so there are a few things to consider here when adding your own logo and links.

All of this code can be found in the header.php file in the theme.

Customizing the Logo

All you really have to do is get an SVG version of your logo, title the file logo.svg, and upload it to the /images/ folder in the theme. The logo has a max-width of 200px so it’ll never be scaled.

That’s all you have to do. Keep it simple.

Customizing the Navigation Menu

The first thing you should do is decide on ONLY 4 links you want to appear in the header. Simple is better here.

The logo will always appear in the middle of the links. So ideally you’ll want two links on both sides.

It’s true that you can have an even number of links, meaning you COULD do 6 links. But then you run the risk of it looking silly on mobile.

The responsive version of Carbonate does not use a hamburger menu because those are stupid. It’s better to just keep your navigation dead simple so it’s always visible on a mobile device. Like this:

To add links and change the anchors, open the header.php file and find the links. You’ll notice they have an order class of order-1 to order-5 with order-3 missing.

That’s because order-3 is the logo, which places it in the middle between the links.

Once you added an href url and change the anchor text, you’ll be good to go. I also recommend keeping your anchor text to only one word. Just looks nicer.