Adjusting megamenu size and position

  • Resolved mbg00000

    (@mbg00000)


    5 years ago

    Hi everyone! I’m having trouble trying to customize the megamenu dropdown boxes. I’m using OceanWP and Elementor.

    What I’m trying to do is to make it so that the dropdowns always appear centered and at a fixed width instead of below their corresponding menu item.

    I managed to customize their background and adjust their position, moving them up to close a gap that showed between them and the header by adding this to the stylesheet:

    .navigation > ul > li > ul.megamenu.sub-menu{
	
	background: #232323;
	margin-top:-16px;
	
}

    However, when trying to adjust either alignment or width, weird things happen. I noticed in the inspector that the width is assigned automatically, so all I know is that the parameters I specify are getting overriden somehow.

    I’m still a beginner, so any pointers in the right direction are appreciated.

    The menu items that have megamenus are SOLUTIONS and PRODUITS.

    • This topic was modified 5 years ago by mbg00000.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Amit Singh

    (@apprimit)

    5 years ago

    Hello,

    You need to use !important in the CSS to make the custom css work. See here – https://stackoverflow.com/questions/1637343/what-are-the-priorities-among-css-selectors

    I visited on your site and megamenu is already in the center. Do you want to make it full width? If yes, then you can edit the Elementor template and select the full-width layout for the section.

    Thread Starter mbg00000

    (@mbg00000)

    5 years ago

    Thank you so much! I managed to solve the issue with your help. Here is what I did in case it’s useful for anyone else.

    Using !important helped me get over not being able to customize certain properties.

    I forgot to specify this initially, but I want the megamenu to display centered and at a fixed width, with some margin both left and right. Something like this:

    

------------------------------------
-------------- header --------------
------------------------------------
     ##########################
     #        megamenu        #
     ##########################

    I was able to set the width and horizontal aligment of the menu by setting it’s position to fixed, then specifying left and width.

    Then I fiddled with the top property to get it to align to the bottom margin of the header. The css I ended up using is:

    
.navigation > ul > li > ul.megamenu.col-1.sub-menu{	
	position: fixed !important;
	left: 15% !important;
	top: 140px;
	width: 70% !important;
}

    However, another small issue came up. I would like to know if there is a more consistent way to align the top of the megamenu to the bottom of the header while keeping the horizontal alignment and side margins relative to the page.

    Again, thanks for taking the time to help me out!

    Amit Singh

    (@apprimit)

    5 years ago

    I didn’t understand it. Can you please explain it? I’m just checking your site and it looks perfect.

    Thread Starter mbg00000

    (@mbg00000)

    5 years ago

    Don’t worry, I think I’m asking for a bit more than this forum is meant for (too specific CSS customization) and I got my main issue sorted thanks to you.

    Thank you for your help and your time!

    Amit Singh

    (@apprimit)

    5 years ago

    Okay, no problem

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adjusting megamenu size and position’ is closed to new replies.