Archived topic
Center menu
6 replies · Started by meceda on October 2, 2021
Hello,
could you tell me how to get the menu centered on the website: meceda.nl
I tried option header example 6 but somehow we are not getting it to function.
Hi there,
do you want all the menu centered inluding the Button? Or just the links so you have:
Logo | centered menu items | button
Let me know.
Hello David,
Yes, that would be great to have as a option.
I changed the menu right now so it fits the box again.
Could you also assist on the css for submenu?
I need would like to have the sub-menu align center of the page with a full width background. also I am not getting it fixed to the header. When opened it goes over the white section of the header.
And is there a option te give the tag h3 to the second parent of the menu,
.main-navigation .main-nav ul ul li.menu-item-has-children>a should be a H3
Try this CSS:
@media(min-width: 769px) {
.nav-float-right #site-navigation {
margin-left: unset !important;
flex: 1;
}
#primary-menu {
margin: auto;
}
#site-navigation .inside-navigation {
position: initial;
}
.inside-header {
position: relative;
}
nav .main-nav > ul > .menu-item-has-children>ul {
margin-top: 20px;
}
nav .main-nav .mega-menu>ul:after {
content: '';
display: block;
background-color: #f2f2f2;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
z-index: -1;
}
nav .main-nav .menu-item-has-children>ul::before {
content: '';
display: block;
height: 20px;
width: 100%;
position: absolute;
top: -20px;
}
}
You may need to adjust this min-width to coincide with your mobile menu break point in this line:
@media(min-width: 769px) {
Yeah dude, that's it!! Marvelous! You should add this to your submenu section.
We don't use the menu on mobile and tablet. We have a separate one. Maybe a nice feature for the future of generatepress.
The main reason I wanted this menu to look like this is because of the dom elements and plugins we added for elementor and it messed up our pagespeed completely.
Awesome - glad to be of help!
Yeah - theres quite a few customizations that we can do with the Simple Mega Menu CSS - but they all require tweaking depending on how the Header/Navigation is set up :) So one size doesn't always fit all.
But its definitely a nice affect !!