0

Wondering if someone can point me in the right direction.

Currently, I'm trying to figure out how to add columns and headings to sub menus. Naturally I want to create a basic megamenu where I can add titles with links inside elements. With list below the items.

I've done a quick mockup on codepen of what I'm trying to achieve under the services link.

Please not I'm working to avoid megamenu plugins because of the unneeded bloat.

Improve this question

1 Answer 1

Reset to default
1

You can do that with default WordPress menu system and CSS.

When you add item to your menu, Make this hierarchy:

- Services
     - Social Welfare
        |- Funeral Service
        |- Food Bank

Then go with CSS

ul.menu > li > ul > li { /* the CSS for column */
    /* You can use combination of float: left; and width: 20% to get 5 column. */
} 
ul.menu > li > ul > li li {} /* the CSS for items inside column */
Improve this answer
2
  • Cheers, Tung Du. I already know how to do it in CSS. I'm just looking to change the markup to reflect the flow of the nav. So using h2/h3 tags and adding columns which don't hold an anchor.
    – 550
    Apr 17, 2016 at 9:30
  • I think the simplest way to get mega menu is to style 2nd level a tag as heading. You can even disble the pointer when hover on it, change from pointer to cursor. If you don't satisfy, you can go with custom nav walker to get the change in markup.
    – Tung Du
    Apr 17, 2016 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.