- This topic has 8 replies, 3 voices, and was last updated 6 years ago by Tom.
-
AuthorPosts
-
March 20, 2018 at 7:28 am #524496Tom
It’s fair to say a lot of us build sites for local business, and an interactive header is a must for any local business site.
Does anyone have any experience designing a header like this? Map marker link, social media buttons, lays perfectly on mobile. Heck I’d pay someone to show me.
March 20, 2018 at 9:46 am #524688LeoStaffCustomer SupportHi there,
So just to make sure, you are wanting to create a header on mobile that has address, phone number then social icons?
If so that’s definitely doable in GP.
Can you link me to what you have so far so I can provide some suggestions?
Let me know.
March 20, 2018 at 9:53 am #524698TomMobile and desktop.
The map icon links directly to the GMB. Social media icons at the bottom.
What I have right now collapses with the phone at the top. You’d like for it to collapse in the middle so it’s easier to access, you know?
Screen shot of it on Mobile.
March 20, 2018 at 8:38 pm #525044TomAnyone?
March 20, 2018 at 9:55 pm #525094LeoStaffCustomer SupportPlease allow us 12 hours to answer the question 🙂
I think both the pictures you are showing are for mobile?
Can you link me to the example instead of the screenshot? Then I can see both desktop and mobile.
Thanks!
March 20, 2018 at 10:02 pm #525098TomLeo my apologies I feel like a huge jerk. I always get this paranoia that forum topics go to the bottom of the pile and you have to add responses to keep them refresh. Stupid, I know.
The first one is desktop. The second is mobile. They look similar because they’re awesome and functional.
March 20, 2018 at 10:38 pm #525113TomLead DeveloperLead DeveloperHey Tom,
So are you basically wanting to display your header widgets underneath your site logo?
If so, try adding this CSS:
@media (max-width: 768px) { .inside-header { display: flex; flex-direction: column; } .site-logo { order: 1; } .header-widget { order: 2; } }
Let me know 🙂
March 21, 2018 at 7:46 pm #525923TomMine didn’t work, but I did hire someone to do it, but maybe it will help someone else?
Here’s what I came up with:
When you’re using the widget for a CTA it’s much easier to access via mobile when it’s 2nd.
@media screen and (max-width: 760px) {
.number-wrap {
margin:1px 5% 0 5%;
width:90%;
float:none;
clear:both;
position:relative;
bottom:2px;
}
.site-logo {
float: none;
display: block;
text-align: center;
width: 100%;
max-width: none;
order: 1;
}
.header-widget {
order: 2;
}
#site-logo-inner {
display: block;
}
#site-header #site-logo img {
display: inline;
float: none;
}
}March 21, 2018 at 9:21 pm #525982TomLead DeveloperLead DeveloperThat’s strange – that code should do what mine tried to do above.
It’s all working now? 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.