Nav Menu Float Right - but align centre

site address added in private info

Hi there,

try this CSS:

@media(min-width: 1024px) {
    .site-header .cart-contents {
        margin-right: auto;
    }
}

Hi, thats great.

Can I set a margin in px between floating nav menu and logo so that nav menu floats right but aligns left up to the margin ?

And have the basket on the right (which is a hook element - generate_after_header_content)

Thank you
Stephen

Try this CSS to set the distance between the logo and nav:

.nav-float-right #site-navigation {
    margin-left: 0;
}

I set it to 0 as you already have padding around your logo from some other CSS.

Yes that works great.

I've given the cart symbol a class and tried to align to the right with

.hook-cart {
align-content: right;
}

But thats not worked.

Can I align the cart to the right side ?

Try:

.hook-cart {
    margin-left: auto;
}

Thats works great thank you.

I'm trying the mega menu from https://docs.generatepress.com/article/building-simple-mega-menu/

Currently the mega menu dropdown is as wide as the Nav menu.

Can I change the mega menu drop down width ?

Its possible, yes, how wide do you want it ?

Hi, just trying it out at the moment.

Maybe full width or maybe a bit less ?

Thanks

Try add this CSS:

@media (min-width: 769px) {
    nav .main-nav .mega-menu:hover > ul {
        position: fixed;
        z-index: 999;
    }
}

Hi Ying, that works great and makes the mega menu full screen width.

Can I make it a bit narrower maybe 80% ?

Thanks
Stephen

Yes, then try this CSS instead:

@media (min-width: 769px) {
    nav .main-nav .mega-menu:hover > ul {
        position: fixed;
        z-index: 999;
        left: 10% !important;
        right: 10% !important;
        width: 80%;
    }
}

Thank you, your code as always works perfectly.

Unfortunately my ideas are not so good.

- Normally the mega menu dropdown is the same width as the nav menu width.

- Can I make the mega menu dropdown 50px bigger on each side than the nav menu ?

Thanks
Stephen

Try this CSS:

@media (min-width: 769px) {
    nav .main-nav .mega-menu:hover > ul {
        left: -50px !important;
        width: calc( 100% + 100px );   
    }
}