Adding a new menu positions to the MD Child Theme

[Alexander Gonzalez]

I need help figuring out how to add menu positions:

• Multiple menu’s above the header while keeping the main and social menu’s intact.
  • Left side of screen
  • Right side of screen
• Large 3 column/section footer with a menu position

I would want to be able to control these menu items through the wp-menu system.

Thank you all in advance.

 

[Alex]

Hi Alexander! Are you talking about something like this for the header menus?



For the footer menus, your best bet is to go to Appearance > Widgets and add a "Menu" widget to each of the three Footer Columns areas. You can create new menus in Appearance > Menus and select the menu to show on each footer widget. We may have to work on the styling once you've added them, but let's start here first.

 

[Alexander Gonzalez]

Alex,

Exactly, however i still want to maintain the header menu, main menu and social menu.

 

[Alexander Gonzalez]

You are the man btw, hope all is well with you.

 

[Alex]

Alex,

Exactly, however i still want to maintain the header menu, main menu and social menu.

No problem!

I took some old code snippets and factored them into a Drop-in you can install to your site. Once you install and activate this to MD > Drop-ins you will see two new menu areas: Topbar Left and Topbar Right.

Play with this for a little bit and let me know what you think! From here we can figure out any last styling issues and also look at the footer menus once you have all of your links in place.

 

[Alexander Gonzalez]

Again, you are the man, i'm loading it up to site in a bit, i'll let you know how it works out.

 

[Alexander Gonzalez]

Works perfectly! Amazing you just turned it into a Drop In... that's an amazing function, great job.

Styling questions...

• What color is that header assigned to in the Site Design section?
• How can the menu stay within the same width as the header menu?

Thank you

 

[Alexander Gonzalez]

Screenshot

 

[Alexander Gonzalez]

Tried to setup a dropdown menu in the top right and it does not let me select the items

 

[Alexander Gonzalez]

Also the padding between the links on menu are too close together, simply would like for them to adopt the same settings as the other menu items by default, any way to do this?

 

[Alex]

Good feedback, I'll work on an updated version in the morning and send it over.

 

[Alex]

Ok, here's a new version according to your feedback:

1. Supports dropdown menus on both sides
2. Aligns nav menus with site container
3. Uses same spacing as header menu links

Download the new version and simply re-upload it to overwrite the new version on your site. You may need to save the MD settings page again to rebuild the stylesheets as well.

What color is that header assigned to in the Site Design section?

I assigned the "Secondary color" to this menu, but you can overwrite it with your own color like this in your own stylesheet (either a child theme style.css or Appearance > Customize > Additional CSS):

.topbar { background-color: red; }

@media all and (min-width: 900px) {
    .menu-topbar .sub-menu { background-color: red; }
}

 

[Alexander Gonzalez]

the dropdown is still distorted when trying to drop over the header/button (see attached image)

 

[Alex]

the dropdown is still distorted when trying to drop over the header/button (see attached image)

Ah, woops. Made another tweak for you:

 

[Alexander Gonzalez]

functions perfectly now.

I think to make it perfectly line up, is there a way to adjust it bit more so the down arrow is inside of the content box with padding?

thank you