[Support request] NAV wrap

Home Forums Support NAV wrap

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1029206
    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

    #1029241
    David
    Staff
    Customer Support

    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;
        }
    }
    #1029428
    jonathan

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

    #1029527
    David
    Staff
    Customer Support

    Awesome – glad to be of help

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