Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Resolved] Using a Mega Menu w/ Elementor

Home Forums Support Using a Mega Menu w/ Elementor

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Leo 4 days, 22 hours ago.

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

    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
    Staff

    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?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #350700

    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

    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

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

    #350731

    Leo
    Staff

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

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

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

You must be logged in to reply to this topic.