NAV wrap

[jonathan]

Hi,

We have a “block style” NAV which is using navigation as header.

Somewhere around 1100px is bumps to the next line, leaving the log on the first line, and looks terrible. We tried to use % for the width of the NAV blocks, so that maybe they would be responsive to different browser sizes, but it doesn’t work.

Was wondering if anyone had any suggestions.

Thanks!

Jon

[David]

Hi there,

you can try this with you current setup and CSS:

@media(min-width: 769px) {
    /* Stop menu from wrapping */
    .main-navigation.has-branding .inside-navigation {
        flex-wrap: nowrap !important;
    }
    /* ensure logo does not shrink */
    .navigation-branding {
        flex-shrink: 0;
        margin-right: unset;
    }
    /* Force nav to fill space */
    .main-navigation:not(.slideout-navigation) .main-nav {
        flex: 1;
    }
    /* Flex Menu items */
    .main-navigation ul {
        display: flex;
    }
    /* Menu items fill 20% of space availble */
    .main-navigation ul li {
        flex: 1 1 20%;
    }
    /* Reduce menu item padding */
    .main-navigation .main-nav ul li a {
        padding: 10px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[jonathan]

Wow, above and beyond. Thanks so much for your help David. Works perfectly!

[David]

Awesome – glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts