Center Megamenu

Home Forums Icelander Center Megamenu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #20811

    HoCoMN
    Participant

    Center Megamenu

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hello, I would like the megamenu dropdown to be centered in the whole menu instead of building from the selected menu and then heading to the right. I see how to reverse it to make it go left, but would much prefer all of them to be centered whenever they are clicked. How can I make that work? Thank you!

    #20813

    Oliver Juhas
    Keymaster

    Hi HoCoMN,

    Please try applying this custom CSS:

    @media only screen and (min-width: 55em) {
    	.main-navigation-container .megamenu {
    		position: static;
    	}
    
    	.main-navigation-container .megamenu > .sub-menu {
    		left: 50%;
    		margin-left: auto;
    		margin-right: auto;
    		-webkit-transform: translateX(-50%) scaleY(0);
    		    -ms-transform: translateX(-50%) scaleY(0);
    		        transform: translateX(-50%) scaleY(0);
    	}
    
    	.main-navigation-container .megamenu.focus > .sub-menu {
    		left: 50%;
    		-webkit-transform: translateX(-50%) scaleY(1);
    		    -ms-transform: translateX(-50%) scaleY(1);
    		        transform: translateX(-50%) scaleY(1);
    	}
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #20814

    HoCoMN
    Participant

    That works, thank you! When the browser window is too narrow, the side of the menu disappears…is there any way to make this respond to that window size and change?

    #20817

    Oliver Juhas
    Keymaster

    Hi HoCoMN,

    Please understand that the theme megamenu is very simple. For larger megamenus it is recommended using dedicated plugins.

    Also, please understand that I can provide only tips for custom theme modifications. You need to take it from there and adapt to your needs. If you are not familiar with responsive CSS coding, please consider hiring a help.

    You can try this additional custom CSS to resolve the issue on smaller screens:

    @media only screen and (min-width: 55em) and (max-width: 80em) {
    	.main-navigation-container .megamenu.focus > .sub-menu {
    		-webkit-flex-wrap: wrap;
    		    -ms-flex-wrap: wrap;
    		        flex-wrap: wrap;
    		max-width: 120%;
    	}
    
    	.main-navigation-container .megamenu > ul > li,
    	.main-navigation-container .megamenu > ul > li + li {
    		margin-left: 1em;
    		margin-right: 1em;
    	}
    }

    Please adapt the CSS to your needs. Try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 1 week, 6 days ago by  Oliver Juhas. Reason: Fixing code formatting
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.