[Resolved] I would like to have columns in my primary menu dropdown menu, any ideas?

[kyle]

I would like to have 4 columns in my menu dropdown something like in this example

https://shopkeeper-help.zendesk.com/hc/en-us/articles/207365085-Navigation-Multi-column-drop-down-menus

I know a little bit about css but this is me out of my depth.

How can I go about making this happen?

Any help will be appreciated and thanks in advance.

Kyle

[Leo]

Hi Kyle,

It’s not very simple with CSS – Plugin might be a better option before Tom releases something in future.

Checkout this post: https://generatepress.com/forums/topic/make-css-megamenu/#post-223987

Hope it helps!

[Tom]

Thanks for the challenge! Looks like this shouldn’t be that difficult to add into the theme.

Basically follow the direction you pointed us to, but add this CSS to your site:

nav .main-nav .mega-menu {
	position: static;
}

nav .main-nav .mega-menu > ul {
	position: absolute;
	width: 100%;
}

nav .main-nav .mega-menu > ul > li > a {
	font-weight: bold;
}

nav .main-nav .mega-menu>ul>li {
	display: inline-block;
	width: 25%;
	vertical-align: top;
}

nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
	width: 50%;
}

nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
	width: 33.3333%;
}

nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
	width: 20%;
}

nav .main-nav .mega-menu > ul > li > a:hover,
nav .main-nav .mega-menu > ul > li > a:focus,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a {
	background-color: transparent !important;
}

nav .main-nav .mega-menu ul .sub-menu {
	position: static;
	display: block !important;
	opacity: 1 !important;
	width: 100%;
	box-shadow: 0 0 0;
}

nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
	display: none;
}

[kyle]

Hello Tom, Just had a quick play with that and It’s working to a point but it’s still displaying vertically for me.

Can you take a quick look and maybe tell me where I’m going wrong?

Thanks in advance 🙂

http://swingtradesmart.com/

[Tom]

Hmm, that’s because your menu is floating so the width of it isn’t 100%.

You could set it to below header, remove your logo and add it as a navigation logo.

That way you would have a very similar look, and the navigation would be full width so the mega menu would work.

[kyle]

That’s got it! Thank you very much Tom!

[kyle]

One last thing… Everything is working fine now but i can’t get rid of the white space above the navigation. I have added the code

.site-header {
display: none;
}

to my child theme but for some reason this has not worked. If you could take a look I promise I’ll leave you alone for a few days 🙂

Thanks again

[Tom]

Remove these lines from your child theme, they’re causing it to break:

@import url('../generatepress/style.css');
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

[kyle]

Thanks again Tom 🙂

[Tom]

No problem 🙂

[Author]

Posts