Starter Child Theme: Centered Logo With 2 Nav Menus

A popular customization request I get for MD is how to replicate a header menu such as what you see on the new Kolakube site design. That is, a centered logo with nav menus to the right and left of it.

With a little push from MD newcomer michkocis, I've come up with a starter child theme you can use to get a similar style on your own MD powered site.

PREVIEW

Here's what the child theme looks like on a clean install of WordPress + MD:

View attachment 999

DOWNLOAD

For versions of MD4.6 or newer:

md-child-theme.zip

For versions of MD4.4.3 or older:

md-child-theme.zip

INSTALLATION

If you haven't yet installed an MD Child Theme, go ahead and download the one attached to this thread and install it like a regular WordPress theme.

If you're already using a Child Theme, you'll need to merge the code from the attached child theme into you existing one (copying and pasting should work). This Child Theme has the following files in it:

1. style.css
2. functions.php
3. header.php

Here's a quick explanation of each files purpose:

header.php

This file overwrites the default header.php file loaded by MD and allows us to completely override MD's stock header functionality so we can add the markup needed to support this kind of layout.

style.css

To make sure everything aligns correctly and looks nice, I've included some CSS you can use as a starter for your custom menu. You can copy this CSS into your existing stylesheet and just place the code at the bottom.

functions.php

Since this menu doesn't use the built-in WordPress menu system, I wrote an additional function that checks to see if the current page is active. Also, since we're using custom markup here, I included another function that overwrites MD's default JavaScript to ensure these menus toggle open/closed on mobile. Make sure these 2 functions are included in your child theme (kol_menu_active() and md_inline_js()).

INSTALLATION

- As I mentioned above, this menu doesn't use the native WordPress menu system so you'll either have to A.) manage menu links from header.php (this is what I do on Kolakube or B.) continue development and integrate the WP menu system into it.

- When I build more design options into MD, this will be something I consider making an easily selectable option since this is such a commonly requested feature amongst MD customers. Yes, that will have WP menu integration in it.

- I left comments in the style.css file to help you better understand what's going on in that file so you can tweak what you need to as you need to.

Of course, I'm open to any questions you have while using this theme.

md-child-theme-45.zip

 

[Claudia]

Hi Alex,

I want to add dropdown menu item on the nav menu. How to do that?

 

[Alex]

Hey Claudia, I took a look at the existing theme and reworked it for MD4.5, but making dropdowns compatible with this will take more work. I made a note in this thread about eventually making this layout an option, so when that does get added in, you'll be able to use it with dropdown menus.

Sorry to say, but if you're feeling brave you can try to modify MD4.5's header and ask any questions along the way. I did update the theme code in the thread so it works better with MD4.5's new menu styles.

 

[psioni]

Thanks for this modification. It looks good.

Could you tell me how to manage the links in the header.php file? For example, if I wanted one of the links to go to a category archive page, how would I insert the link?

Would I just replace

    <span class="header-left">
                    <a href="/about/" class="header-nav-item<?php echo kol_menu_active( 'about' ); ?>">About</a>

with

    <span class="header-left">
                    <a href="/about/" class="header-nav-item<?php echo kol_menu_active( 'category/Dogs' ); ?>">Dogs</a>

Or does it involve something else?

 

[Alex]

Alright, I just updated the 4.5 child theme again so it accounts for categories (I'm starting to see how inefficient this could become, will have to make this part of MD asap!)

The only thing I changed in the updated theme was the kol_menu_active() function in functions.php. Now, to make one of the links work in the menu you could change your HTML like so:

<a href="/category/dogs/" class="header-nav-item<?php echo kol_menu_active( 'dogs' ); ?>">Dogs</a>
The  part is the actual URL to the page, and the dogs passed in the kol_menu_active function is the slug of any page/category. Since you're linking to the Dogs page, where the URL is /category/dogs/, you'll just want to take the slug and pass it to the function. This way when you're on the active page, you can style the linked tab to look different than the rest.

 

[psioni]

OK, that makes sense. Thank you Alex

 

[michkocis]

Thank you Alex, this place is awesome <3

 

[Alex]

Thank you Alex, this place is awesome

Glad to hear from you, can't wait to see what you've been working on.

 

[jwnek]

hey alex, I'd like to position my logo in the center as well.

I just updated to 4.6.

Do the instructions list above apply to 4.6 as well?

Just checking before I go through the process

thanks

jim

 

[Alex]

Hey Jim, thanks for posting here! I just updates the child theme files for full compatibility with MD4.6. Yes, instructions are the same.

 

[timbojames]

No matter how many times i've tried following these steps it's just not working. My site is: optimalresultstraining.com

Please help!

 

[Alex]

Hey Timbo, no problem. I don't see that you have the child theme installed on your site, did you activate it from Appearance > Themes?