[Resolved] Adding Phone Icon to Mobile Header

[Alan]

I followed the instructions provided in the previous support requests to add a phone icon to the Mobile header, but am still not able to achieve the look that I want.

I created a hook element for inside_mobile_header and added the shortcode from the Lightweight Social Icons widget. You can see the hook element that I created here https://savacaystage.wpengine.com/wp-content/uploads/2020/07/Add-Phone-Icon-to-Mobile-Header.jpg and you can see how the icon looks on mobile here https://savacaystage.wpengine.com/wp-content/uploads/2020/07/Phone-Icon-Example.jpg.

As you can see, the phone icon is to the left of the logo and not centered horizontally. Please advise on how I can get the phone icon to appear to the left of the hamburger menu and center it vertically like the hamburger menu.

Thanks,

[Tom]

Hi there,

Can you try this as your content?:

<div class="mobile-bar-items">
    Your shortcode
</div>

[Alan]

Tom:

That worked. Is there any way that I can move the phone icon closer to the hamburger menu?

https://savacaystage.wpengine.com/wp-content/uploads/2020/07/Add-Phone-Icon-to-Mobile-Header2.jpg

[Leo]

Can you give this CSS a shot?

@media (max-width: 1024px) {
    .main-navigation .mobile-bar-items .widget a, .main-navigation.has-branding .menu-toggle {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.mobile-bar-items .lsi-social-icons li {
    margin: 0 !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Alan]

Leo:

That worked perfectly. Thanks!!

[Leo]

No problem 🙂

[Author]

Posts