Headers with CTA

Hi 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.

Mobile 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.

https://ibb.co/etLpxx

http://lakeozarkelectrician.com/

Anyone?

Please 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!

Leo 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.

https://alizadehortho.com/

Hey 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 :)

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

That's strange - that code should do what mine tried to do above.

It's all working now? :)