[Resolved] Adding phone and social media icons on mobile

[Jo]

sorry – you have answered! Ignore the last message 🙂

[Jo]

I’ve added that function. By the way I liked the icons in my brand colour but don’t ask me how I did that!

[Tom]

I adjusted the HTML a bit so GP takes over the styling 🙂

So what we have now is the standard GP mobile header.

What we want is:

1. The logo to be larger
2. The mobile toggle to sit next to the logo
3. The phone number below the logo and toggle, on the left.
4. The social icons on the same line as the phone number, but all the way on the right.

Is that correct? If so, it will create some white space on the same line as the logo/mobile toggle on the far right.

[Jo]

That’s correct.

With the background colour white, the menu toggle black and the icon colours #e4a025.

Then I will see what it looks like. Sorry for being a nightmare 🙂

[Tom]

No nightmare! Happy to help.

Ok, let’s do this:

#mobile-header {
    background-color: #fff;
}

#mobile-header a, 
#mobile-header .menu-toggle {
    color: #000;
}

#mobile-header .menu-toggle {
    position: relative;
    bottom: -5px;
}

#mobile-header .site-logo {
    margin-right: 0;
}

#mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    flex: 1 1 100%;
}

#mobile-header .mobile-bar-items a {
    color: #e4a025;
}

#mobile-header .mobile-bar-items .social-icons {
    float: right;
}

Which achieves: https://www.screencast.com/t/t98JJ38L8Jc

[Jo]

My preference is to have the menu toggle on the left hand side (or is the right side more common?) I had the height of the logo to be 80px, which looked good.

Maybe move the social icons a bit closer together.

Which just leaves the phone icon and what to do with that?

[Tom]

I think having the mobile toggle on the right is more common.

We can definitely bring the icons closer together, but it’s important to remember that users will see this on mobile, so it’s good to have a bit of extra room to tap.

[Jo]

OK, so let’s leave the social icons as they are.

Which just leaves the phone icon.

Are you able to add phone number 07903 329763 along side the phone icon and make the whole of the phone area clickable? Can the telephone number be in black please.

Thanks

[Jo]

I’ve just realised, there is no email icon in the mobile header!

Some people prefer to email than phone. The email icon will link to my contact page.

Sorry!

[Tom]

You can do this:

add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
function tu_mobile_header_html() { ?>
    <div class="mobile-bar-items">
        <span class="phone">
            <a style="color: black;" href="tel:xx" target="_blank" rel="noopener noreferrer"><i class="fa fa-phone"></i> 07903 329763</a>
        </span>
        <span class="social-icons">
            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a>
            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a>
            <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer"><i class="fa fa-linkedin"></i></a>
            <a href="mailto:you@youremail.com" target="_blank" rel="noopener noreferrer"><i class="fa fa-envelope"></i></a>
        </span>
    </div>
<?php 
}

Be sure to update the URLs to the social profiles, and your email/phone number.

[Jo]

I’ve done that.

The email icon isn’t appearing. Does that need to be CSS?

When I click on the phone number it says “This website has been blocked from automatically starting a call”

Thanks

Jo

[Tom]

Ah whoops – I just adjusted the code above which fixes the email icon.

If you don’t want to replace the whole block of code, just replace:

<i class="fa fa-email"></i>

With:

<i class="fa fa-envelope"></i>

Did you try the number on your phone? I just tried on my Macbook and it asked me if I want to use Facetime.

[Jo]

The email icon now works – thanks!

It’s just this message that appears when trying to call. I’m trying it on my iPhone. When we had the previous function with just the phone icon and not the phone number it just went straight to call. This message has only started appearing since the latest function with the phone number.

I don’t really want this to pop up as it may but off people calling. You can ‘allow call’ and it will call.

Any ideas why it’s doing this now?

Jo

[Jo]

My partner has an iPhone too and he tried to call and didn’t get the message.

Is it because I am calling from the number??

[Tom]

It definitely could be.

[Author]

Posts