[Resolved] Nav Menu Float Right – but align centre

[Stephen]

Hi, I’ve set the nav menu to float to the right of Logo

Can I change the alignment (or is it justification) so the nav menu floats right of Logo but aligns centrally in the space right of the logo.

Float right, align centrally.

Thank you
Stephen

[Stephen]

site address added in private info

[David]

Hi there,

try this CSS:

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

[Stephen]

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

[David]

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.

[Stephen]

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 ?

[David]

Try:

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

[Stephen]

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 ?

[David]

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

[Stephen]

Hi, just trying it out at the moment.

Maybe full width or maybe a bit less ?

Thanks

[Ying]

Try add this CSS:

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

[Stephen]

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

Can I make it a bit narrower maybe 80% ?

Thanks
Stephen

[Ying]

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%;
    }
}

[Stephen]

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

[David]

Try this CSS:

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

[Author]

Posts