[Resolved] Nav Menu Float Right – but align centre

Home Forums Support [Resolved] Nav Menu Float Right – but align centre

Home Forums Support Nav Menu Float Right – but align centre

  • This topic has 22 replies, 3 voices, and was last updated 1 week, 1 day ago by David.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #2297065
    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

    #2297071
    Stephen

    site address added in private info

    #2297122
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media(min-width: 1024px) {
        .site-header .cart-contents {
            margin-right: auto;
        }
    }
    #2297247
    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

    #2297281
    David
    Staff
    Customer Support

    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.

    #2297311
    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 ?

    #2297315
    David
    Staff
    Customer Support

    Try:

    .hook-cart {
        margin-left: auto;
    }
    #2297324
    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 ?

    #2297334
    David
    Staff
    Customer Support

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

    #2297454
    Stephen

    Hi, just trying it out at the moment.

    Maybe full width or maybe a bit less ?

    Thanks

    #2297597
    Ying
    Staff
    Customer Support

    Try add this CSS:

    @media (min-width: 769px) {
        nav .main-nav .mega-menu:hover > ul {
            position: fixed;
            z-index: 999;
        }
    }
    #2297644
    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

    #2297654
    Ying
    Staff
    Customer Support

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

    #2297995
    David
    Staff
    Customer Support

    Try this CSS:

    @media (min-width: 769px) {
        nav .main-nav .mega-menu:hover > ul {
            left: -50px !important;
            width: calc( 100% + 100px );   
        }
    }
Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.