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

[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

[Leo]

Hi there,

Can you add in the phone icon first?

Let me know 🙂

[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

[David]

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;
}

[Shane]

Great, that worked well – thanks David!

[David]

You’re welcome

[Author]

Posts