[Resolved] Split Header on Mobile

Home Forums Support Split Header on Mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #942716
    Joe

    Hello,

    I added the split header/nav with logo in the center. I have it looking perfect in desktop view, but mobile doesn’t look too good with the split header/nav. How can I change the mobile view only to NOT have the split header/nav and display header to left and menu on right?

    Thank you in advance for your help.

    #942771
    David
    Staff
    Customer Support

    Hi there,

    in the code there is a large section followed by a smaller piece of code wrapped in a @media query. For the large piece of code wrap it in a media query:

    @media (min-width: 769px) {
    /* CSS in here */
    }

    This will apply that code only to desktop views.

    #942780
    Joe

    Thanks. I added that as you displayed, but the mobile is still centered. My apologies but my CSS is a little rusty. Do I need to replace /* CSS in here */ with CSS? If so, can you please share the code?

    #942791
    David
    Staff
    Customer Support

    So lets use this CSS:

    @media (min-width: 1024px) {
    
        .inside-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
    
        .header-widget {
            order: 10;
            overflow: visible;
        }
    
        .nav-float-right .header-widget {
            top: auto;
        }
    
        .nav-float-right .header-widget .widget {
            padding-bottom: 0;
        }
    
        .site-branding,
        .site-logo {
            position: absolute;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            z-index: 200;
        }
    
        #mobile-header .mobile-bar-items {
            -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
            order: 4;
            margin-left: auto;
        }
    
        #site-navigation {
            float: none;
            width: 100%;
        }
    
        .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav>ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    
        .main-navigation .menu-item-separator {
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
        }
    
        .main-navigation .menu-item-separator a {
            font-size: 0;
            background: transparent !important;
        }
    
        .slideout-navigation .menu-item-separator,
        .main-navigation.toggled .menu-item-separator {
            display: none !important;
        }
    }

    I have set the breakpoint higher as the menu items overlap the logo before mobile break is reached. Add the CSS in place of your current CSS then in Customizer > Layout > Primary Navigation set your Mobile Breakpoint to 1023px.

    #942804
    Joe

    Perfect! Thank you so much!

    #942982
    David
    Staff
    Customer Support
    #943000
    Joe

    One more thing…how can I make the mobile menu hamburger icon bigger? I found css to do it, but I don’t think it works with my current css you advised. Thanks again.

    #943076
    Leo
    Staff
    Customer Support

    Can you try this?

    .menu-toggle {
        font-size: 25px;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.