[Support request] Headers with CTA

Home Forums Support [Support request] Headers with CTA

Home Forums Support Headers with CTA

  • This topic has 8 replies, 3 voices, and was last updated 6 years ago by Tom.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #524496
    Tom

    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.

    https://ibb.co/bt16Sx

    #524688
    Leo
    Staff
    Customer Support

    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.

    #524698
    Tom

    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/

    #525044
    Tom

    Anyone?

    #525094
    Leo
    Staff
    Customer Support

    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!

    #525098
    Tom

    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/

    #525113
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #525923
    Tom

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

    #525982
    Tom
    Lead Developer
    Lead Developer

    That’s strange – that code should do what mine tried to do above.

    It’s all working now? 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.