Archived topic
How to change the width & position of the Simple Mega Menu items?
3 replies · Started by Sascha on May 22, 2022
Hi
I have added a menu with 3 items (Start / Lösungen / Lernen) and added a 4th one (Anmelden) via Block Element) on this site.
The primary navigation is aligned to the right and "Lösungen" & "Lernen" menu-items contain child & sub-child items, which I want to display as a mega-menu.
I have applied the CSS to the Customizer CSS and applied the Classes to the parent menu-items as recommended in your docs:
mega-menu mega-menu-col-2
but the mega-menu is too wide, as you can see here. The dropdown-menue should be smaller, like 10% of the width, and the child-items should be displayed underneath the parent-items, not on the left side, since the menu is located at the right side.
Can you please help me with this?
Thank you in advance and kind regards,
Sascha
Hi there,
in the CSS look for:
nav .main-nav .mega-menu>ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
}and change it to:
nav .main-nav .mega-menu>ul {
position: absolute;
width: 100%;
max-width: 800px;
left: unset !important;
right: 0;
display: flex;
flex-wrap: wrap;
}Adjust the max-width to suit.
As an aside, the Animated Headline is loading text of different lengths some of which has more lines than others, this is casing Layout Shift on the page. Which may result in CLS being recorded against your Google Core Web Vitals...
Hi David,
thanks a lot, now it's way easier for me to find the correct dimensions :)
Have a great Monday!
Sascha
Glad to be of help!
