[Resolved] Center primary menu

Home Forums Support [Resolved] Center primary menu

Home Forums Support Center primary menu

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #2378513
    Salty Communication

    Hi!
    I cant get my primary menu to get centered. I have gone through all the tricks I can find on the forum but I cant manage to get it work.
    In the customizer -> layout -> primary menu I have no “Navigation Aligment”.

    I have set up mega menu with the help of the GP Documentation. Maybe that has something to do with it?

    All the best!

    -Johan

    #2378608
    David
    Staff
    Customer Support

    Hi there,

    the Alignment option would only be visible if the Navigation Location is set to Before or After the header.
    When its Floated to the right, Centering is very subjective and requires CSS.

    For example this CSS will center the navigation in the available space.

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

    So you have: Logo | equal space | Navigation | equal space

    However if you want the navigation centered in the header, then you have to account for the logo takin up some space and add that same amount of space to the right of the nav

    ie. Logo | equal space | Navigation | equal space + logo width

    
    .nav-float-right #site-navigation {
        margin-right: auto;
    }
    @media(min-width: 1240px {
        .nav-float-right #site-navigation {
            padding-right: 210px;
        }
    }
    #2379581
    Salty Communication

    Thanks David! I got the menu centered, but the padding doesnt seem to work. Maybe it has something to do with the CSS for the mega menu?
    I got this code red as well in the customizer:
    .nav-float-right #site-navigation {

    As you can see on the page the buttons right to the menu is very close to the menu. I want some padding between those. I tried to add padding to the widget itself, but then the menu got pushed to the left as well.

    #2379607
    Fernando
    Customer Support

    Hello there,

    Can you update the code above to this?:

    .nav-float-right #site-navigation {
        margin-right: auto;
    }
    @media(min-width: 1240px) {
        .nav-float-right #site-navigation {
            padding-right: 210px;
        }
    }
    #2379830
    Salty Communication

    Hi!
    Perfect. Now it is centered. However, I need the buttons to be more aligned to the right. Any clues how to fix that?

    #2379903
    David
    Staff
    Customer Support

    Remove all of that CSS and add this:

    #site-navigation {
        flex: 1;
    }
    .main-navigation .menu-bar-items,
    .main-navigation .main-nav{
        margin-left: auto;
    }
    #2379930
    Salty Communication

    Perfect! It is now centered. The mega menu got pretty huge though. How do I size the mega-menu when hovering over the menu?
    Is there a way to add a box shadow to the open mega-menu as well?

    #2379948
    David
    Staff
    Customer Support

    Try this CSS:

    
    #primary-menu {
        position: relative;
    }
    nav .main-nav .mega-menu > ul {
        box-shadow: 0 9px 6px 3px rgba(0,0,0,0.2);
    }
    #2380757
    Salty Communication

    Super David. Thanks!

    -J

    #2380802
    Salty Communication

    Sorry to open this one up again.
    But how do I get the menu to get centered on the sticky menu as well on desktop?

    -J

    #2380852
    Fernando
    Customer Support

    Hello there,

    Can you re-share the link to the site in question?

    #2381034
    Salty Communication

    Sure, sorry!

    #2381407
    David
    Staff
    Customer Support

    Change this CSS:

    
    .main-navigation .menu-bar-items,
    .main-navigation .main-nav{
        margin-left: auto;
    }

    to:

    
    .main-navigation .menu-bar-items,
    .main-navigation .main-nav{
        margin-left: auto !important;
    }
    #2383747
    Salty Communication

    Perfect. Thanks!

    #2383886
    David
    Staff
    Customer Support

    You’re welcome

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.