Site logo

Archived topic

Center menu

6 replies · Started by meceda on October 2, 2021

Viewing posts 1–7 of 7

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 !!

This archived topic is closed to new replies.