[Resolved] Using a Mega Menu w/ Elementor

Home Forums Support Using a Mega Menu w/ Elementor

This topic contains 5 replies, has 2 voices, and was last updated by  Leo 11 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #350573

    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?

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #350665

    Leo Customer Support

    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?

    #350700

    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

    #350704

    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.

    #350730

    Scott

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

    #350731

    Leo Customer Support

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.