Archived topic
Adding Phone Icon to Mobile Header
5 replies · Started by Alan on July 2, 2020
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,
Hi there,
Can you try this as your content?:
<div class="mobile-bar-items">
Your shortcode
</div>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
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/
Leo:
That worked perfectly. Thanks!!
No problem :)
