[Support request] Logo on left, mobile menu on right with phone button next to it…

Home Forums Support [Support request] Logo on left, mobile menu on right with phone button next to it…

Home Forums Support Logo on left, mobile menu on right with phone button next to it…

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1380452
    Nadine

    Hi,
    I’m trying to do the following on mobile – logo on left, phone button next to hamburger menu on right, with translator drop down below that on right.I mocked it up, hopefully the image below works!

    mockup

    Edit: trying a different place
    mockup

    Thanks!

    #1380522
    David
    Staff
    Customer Support

    Hi there,

    can you unlock that image so we can view – it currently requires access to be granted 🙂

    #1380527
    Nadine

    Hi David, thanks. I tried unlocking but it still wasn’t showing so I loaded onto the site instead. I edited my original comment.

    #1380616
    David
    Staff
    Customer Support

    In your child theme you have some CSS for your mobile media query.
    Replace it with this:

    @media (max-width: 768px) {
        .inside-header {
            display: flex;
        }
    
        .site-logo {
            margin-right: auto;
        }
    
        .phonebtn {
            order: 1;
        }
    
        .menu-toggle {
            line-height: 40px;
            order: 4
        }
    
        #translator {
            order: 10;
            flex: 1;
            justify-self: flex-end;
            margin: 10px 0;
        }
    
        #translator .switcher {
            margin: 0 10px 0 auto;
        }
    
        #site-navigation {
            margin-top: 0 !important;
        }
    
        .top-bar {
            font-size: 16px;
        }
    
    }

    Should get us close.
    In Customizer > Layout > Primary Nav – you can delete the Mobile Menu label.

    #1380753
    Nadine

    thank you so much for this, it really got me far, but I’m still having trouble with the sticky header on mobile. I’m not sure if it’s just caching or if I’m just not hitting the right things.

    #1380871
    Nadine

    I’m so close, the only thing I can’t get sorted is the translator dropdown on the mobile sticky header. I’m not sure why it’s different than the regular header, I can’t find a different class for it in the sticky header.

    #1380891
    David
    Staff
    Customer Support

    Within media query change:

    #translator .switcher {
        margin: 10px auto;
    }

    for this:

    #translator .switcher {
        margin: 0 10px 10px auto;
    }

    and then add this:

    .main-navigation.is_stuck #translator .switcher {
        position: relative;
        top: -30px;
    }
    #1381064
    Nadine

    Thank you so much David! I’m still having some trouble on different phones, but I’ll try again tomorrow to make sure it’s not server caching.

    #1381170
    David
    Staff
    Customer Support

    Its a tricky layout I must admit. Let us know how you get on

    #1382212
    Nadine

    It’s still not right on mobile. The sticky header is a bit wonky. The translator dropdown is underneath and the menu is as well.

    #1382656
    David
    Staff
    Customer Support

    What if we use the Mobile Header – it will provide consistency between static and sticky header ?
    Theres the inside_mobile_header hook you can use to add your button and translator.

    It will still take some CSS. Let me know

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