Jump to content


Photo

Starter Child Theme: Centered Logo With 2 Nav Menus


  • Please log in to reply
11 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 09 August 2016 - 02:33 PM

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:

 

Attached File  Screen Shot 2016-08-09 at 3.02.10 PM.png   35.01KB   0 downloads

 

DOWNLOAD

 

For versions of MD4.6 or newer:

 

Attached File  md-child-theme.zip   2.32KB   27 downloads

 

For versions of MD4.4.3 or older:

 

Attached File  md-child-theme.zip   2.28KB   18 downloads

 

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.

Attached Files


- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 Claudia

Claudia

    Member

  • MD Customer
  • PipPip
  • 11 posts

Posted 13 September 2016 - 01:05 AM

Hi Alex,

 

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



#3 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 13 September 2016 - 04:32 PM

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.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#4 psioni

psioni

    Newbie

  • MD Customer
  • Pip
  • 6 posts

Posted 15 September 2016 - 04:16 PM

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?



#5 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 15 September 2016 - 05:06 PM

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 <a href=""> 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.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#6 psioni

psioni

    Newbie

  • MD Customer
  • Pip
  • 6 posts

Posted 16 September 2016 - 07:37 AM

OK, that makes sense. Thank you Alex



#7 michkocis

michkocis

    Newbie

  • MD Customer
  • Pip
  • 5 posts

Posted 12 November 2016 - 04:16 PM

Thank you Alex, this place is awesome <3



#8 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 12 November 2016 - 05:09 PM

Thank you Alex, this place is awesome <3

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


- Alex
Check out the Kolakube blog or follow me on Twitter.

#9 jwnek

jwnek

    Advanced Member

  • MD Customer
  • PipPipPip
  • 51 posts

Posted 24 January 2017 - 02:18 PM

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



#10 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 24 January 2017 - 03:14 PM

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


- Alex
Check out the Kolakube blog or follow me on Twitter.

#11 timbojames

timbojames

    Newbie

  • MD Customer
  • Pip
  • 3 posts

Posted 15 August 2017 - 07:38 AM

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

 

Please help!



#12 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 15 August 2017 - 08:55 AM

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?


- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users