[Resolved] Adding phone and social media icons on mobile

Home Forums Support [Resolved] Adding phone and social media icons on mobile

Home Forums Support Adding phone and social media icons on mobile

Viewing 15 posts - 16 through 30 (of 32 total)
  • Author
    Posts
  • #552900
    Jo

    sorry – you have answered! Ignore the last message πŸ™‚

    #552903
    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!

    #552909
    Tom
    Lead Developer
    Lead Developer

    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.

    #552923
    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 πŸ™‚

    #552928
    Tom
    Lead Developer
    Lead Developer

    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

    #552933
    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?

    #553324
    Tom
    Lead Developer
    Lead Developer

    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.

    #553449
    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

    #553487
    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!

    #553875
    Tom
    Lead Developer
    Lead Developer

    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.

    #553913
    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

    #554272
    Tom
    Lead Developer
    Lead Developer

    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.

    #554473
    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

    #554481
    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??

    #554888
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 16 through 30 (of 32 total)
  • You must be logged in to reply to this topic.