[Resolved] Mobile navigation is header – logo to centre with phone icon to left (menu stay

Home Forums Support Mobile navigation is header – logo to centre with phone icon to left (menu stay

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1254098
    Shane

    Hi guys,
    I’ve seen some previous threads today have parts of what I am looking to do but couldn’t find both, currently I have on mobile my logo on the left and menu on the right.

    For mobile only, Can you point me in the right direction to move the logo to centre and have a phone icon on the left?
    So end result would be:
    Phone icon left, logo middle, menu right

    Thanks so much!
    Kind regards,
    Shane

    #1254362
    Leo
    Staff
    Customer Support

    Hi there,

    Can you add in the phone icon first?

    Let me know 🙂

    #1256942
    Shane

    Hi Leo,

    Thanks for your message.
    I have added the Icon using the Elements > Hook > inside_navigation, but if possible I still need help with:
    1) Having this only display on mobile devices
    2) When displaying on mobile devices, it stays left but the logo goes centre
    3) Turn off the Top Bar widget when on mobile

    Thanks again Leo!
    Cheers
    Shane

    #1257601
    David
    Staff
    Customer Support

    Hi there,

    try this instead:

    1. Customizer > Layout > Header – enable the Mobile Header, you will need to add the mobile header logo.
    2. Change you Hook element to inside_mobile_header
    And in your <a href=".... add a class of mobile-call eg.

    <a class="mobile-call" href="tel:+12344556677">

    3. The add this CSS:

    .site-logo.mobile-header-logo {
        margin: auto !important;
    }
    @media (max-width: 768px) {
        .top-bar {
            display: none !important;
        }
    }
    .mobile-call {
        min-width: 60px;
    }
    #1258757
    Shane

    Great, that worked well – thanks David!

    #1259139
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.