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:
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
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:
- style.css
- functions.php
- header.php
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
Last edited by a moderator: