[Resolved] Using a Mega Menu w/ Elementor

[Scott]

I have created a header in Elementor and included in the page design using GP Hooks and all was working as expected. I went to create a mega menu according to https://docs.generatepress.com/article/building-simple-mega-menu/ only to find that the CSS was not targeting that element. I changed the code replacing nav .main-nav with .elementor-widget-default-navmenu .elementor-nav-menu resulting in the following:

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu {
	position: static;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul {
	position: absolute;
	width: 100%;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul > li > a {
	font-weight: bold;
}

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

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu.mega-menu-col-2>ul>li {
	width: 50%;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu.mega-menu-col-3>ul>li {
	width: 33.3333%;
}

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu.mega-menu-col-5>ul>li {
	width: 20%;
}

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

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

.elementor-widget-default-navmenu .elementor-nav-menu .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
	display: none;
}

@media (max-width: 768px) {
	nav .mega-menu>ul>li {
		display: block;
		width: 100% !important;
	}
        .elementor-widget-default-navmenu .elementor-nav-menu .mega-menu > ul {
                position: relative;
        }
}

This works up to a point. The resultant mega menu has a jagged-edged bottom and not a smooth box. What have I missed?

[Leo]

Hi there,

Hmm not sure if that CSS would work perfectly if you are using Elementor header.

Can you provide a link to your site?

[Scott]

Ok. By tearing it out and starting over, I have changed the symptoms, but still not working. Now, all I get is a single column.

https://staging.rcta.co

[Scott]

What I am trying to accomplish is divide the header to a 25% logo/75% menu width. with the logo and nav on the same level. If I float it right, it will look correct until I resize, but then it wraps instead of collapsing to a mobile menu at tablet size. If you have some trickery to accomplish that, I will just go back to the GP header.

[Scott]

Nevermind. I am able to accomplish what I need to using Max Mega Menu plugin. Thanks.

[Leo]

No problem! That would be the best way to do it for sure.

[Author]

Posts