Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[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

  • This topic has 31 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #533559
    Jo

    Hi,

    I’m really struggling with the layout of the mobile version. I need to condense the header and add the phone icon and social media icons (as showing in the desktop version).

    You have previously suggested I use the mobile header feature:

    https://docs.generatepress.com/article/mobile-header/

    When I do this the logo goes too small and all I get is the small logo and the menu icon next to it.

    I have tried to add the phone icon as per your suggestion:

    https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

    I had no idea what I was doing here but I added the plug-in Code Snippets and I added the following code:

    add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
    function tu_mobile_header_html() { ?>

    Your mobile header HTML in here

    <?php }

    I have no idea what to do next??

    Thanks

    Jo

    GP Premium 1.6
    #533939
    Leo
    Staff
    Customer Support

    Hi there,

    You need to replace “Your mobile header HTML in here” to the desired content like FontAwesome icons, phone number or anything you want.

    Search in generate_inside_mobile_header our forum to see lots of examples:
    https://generatepress.com/forums/search/generate_inside_mobile_header/

    #548154
    Jo

    Hi Leo,

    I have searched the forum as per your suggestion. However I still don’t have the desired look on the mobile header. This is the current coding:

    add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
    function tu_mobile_header_html() { ?>

    <?php }

    1. I would like to have the navigation bar with no background colour, with the toggle menu in black

    2. I would like to have the logo larger

    3. I would like to have the phone icon on it’s own (on a separate line to the social media icons)

    4. I would like the toggle menu to appear on the left hand side, the logo in the centre, the phone and social media icons on the right hand side.

    5. I would like the icons to be larger and have space between them

    If you can please help with this and then I will see how it looks.

    Many thanks

    Jo

    #548596
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m having trouble picturing exactly how you want it to look. Do you have any examples I can check out?

    This CSS might get you closer:

    .mobile-header-content {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
        margin-right: 10px;
    }
    
    .mobile-header-content .fa {
        font-size: 25px;
        line-height: 60px;
        margin: 0 5px;
    }
    
    #mobile-header .site-logo {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-left: auto;
        margin-right: auto;
    }
    
    #mobile-header .menu-toggle {
        width: 120px !important;
        text-align: left;
        line-height: 60px;
    }
    #549136
    Jo

    Hi,

    That’s still some way from what I’m wanting.

    This site is kind of an example, although not exactly!

    https://www.nbcsbookeepingservices.co.uk/

    At the moment the background colour of the mobile header is black. I would like to have this white (as per the main body of the website). Which will mean the menu toggle will need to be black.

    I would like the menu toggle to be left aligned, centrally to the logo.

    I would like the logo to be in the centre and larger than it currently is (on mobile).

    I’m not sure about the phone and social media icons. However I would like the phone icon to be away from the social media. How would it look if they were put below the logo with the phone icon (with ‘Call us’) to the left and the social media icons to the right? Or would it look better to just have the phone icon in the header and put the social media elsewhere?

    Thanks

    Jo

    #549972
    Tom
    Lead Developer
    Lead Developer

    Try adding this as well:

    #mobile-header {
        background: #fff;
    }
    
    #mobile-header .menu-toggle {
        color: #000;
    }
    
    #mobile-header .site-logo img {
        height: 100px;
    }
    
    #mobile-header .inside-navigation {
        align-items: center;
    }

    For the phone number, can you give the <a> element a class like phone-number? I may be able to tweak it a bit for you 🙂

    #551377
    Jo

    Hi,

    Background colour, menu toggle, size of logo – all great!

    The depth of the mobile header is too deep. If you look on the mobile version home page, I want the header to be sized so you can see my head (although some may say it’s better not to see it lol). This gives the target for the sizing.

    https://charnwoodbookkeeping.co.uk/wp/ – please look on mobile.

    With that in mind we need to create less ‘white’ space. Out of interest, there is quite a lot of CSS for the mobile. If you add a new CSS does it supersede anything previous?

    Can we move the logo to be along side the menu toggle – it will have to align right as there isn’t enough room to centre.

    Below the logo can the social media icons (NOT phone) align to the right.

    Keep the phone icon to the left. The phone number is 07903 329763.

    Many thanks

    Jo

    #552020
    Tom
    Lead Developer
    Lead Developer

    The issue we’re running into is horizontal space. The logo and text is so large that it’s pushing everything down on separate lines.

    You can try replacing this:

    #mobile-header .menu-toggle {
        width: 120px !important;
        text-align: left;
        line-height: 60px;
    }

    With this:

    #mobile-header .menu-toggle {
        text-align: left;
        line-height: 60px;
    }

    That should help a bit, depending on the width of the mobile device.

    #552414
    Jo

    That didn’t make any difference.

    I’m thinking I need to stay up at night as when I reply you are in bed.

    I have changed the logo height to be 80px and that has now moved the logo up next to the menu toggle. However I have an iPhone but hopefully this will be good on all devices?

    Please can the logo be moved slightly closer to the menu toggle. Please can the menu toggle be moved down so it’s centre against the logo.

    Which leaves the rest of my previous message:

    Below the logo can the social media icons (NOT phone) align to the right.

    Keep the phone icon to the left. The phone number is 07903 329763.

    Many thanks!

    Jo

    #552823
    Tom
    Lead Developer
    Lead Developer

    Hmm, I think we’ve complicated things.

    We can definitely do the layout you mentioned.

    First, let’s remove the CSS we added above and restart. Once removed, let me know and I’ll figure out the layout you’re looking for.

    #552877
    Jo

    Hi,

    Which CSS am I removing? You say ‘above’ but do you mean the last message above, or all of the CSS in this topic?

    I don’t want to mess anything up.

    #552884
    Tom
    Lead Developer
    Lead Developer

    Remove all of the CSS I’ve provided in this topic for now. It will be better to start from scratch instead of having to work around what we’ve already done. Some of it will likely be re-used, but I don’t want you to have any CSS in there that isn’t necessary.

    Also, if you want to separate the phone number and the other icons, you need to place them in two separate elements within the function:

    <span class="phone-number">
        Phone number icon in here
    </span>
    <span class="social-icons">
        Social icons in here
    </span>

    Then I’ll be able to use CSS to separate them.

    #552890
    Jo

    I’ve deleted all CSS from this topic. Which leaves the following CSS from beforehand:


    @media
    (max-width: 768px) {
    .header-widget * {
    margin-top: 20px;
    text-align: center !important;
    }
    }

    .custom-fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    }

    .custom-fixed-header + * {
    padding-top: 120px;
    }
    .menu-toggle:before {
    font-size: 35px;
    }
    .header-widget .textwidget h3 {
    margin-bottom: 10px;
    }

    @media
    (max-width: 768px) {
    #black-studio-tinymce-3 {
    padding-bottom: 0;
    margin-bottom: 0;
    }
    }

    @media
    (max-width: 768px) {
    #lsi_widget-4 {
    display: none;
    }
    }

    @media
    (max-width: 768px) {
    .header-widget * {
    margin-top: 20px;
    text-align: center !important;
    }
    }

    @media
    (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
    margin-bottom: 0;
    }
    }
    .mobile-header-content {
    display: inline-block;
    }
    .mobile-header-content a{
    display: inline-block;
    }
    .inside-footer-widgets {
    text-align: center;
    }

    Do I need to remove any of this also?

    #552895
    Tom
    Lead Developer
    Lead Developer

    Looks good.

    Now, instead of the function you’re currently using to add icons, 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 href="tel:xx" target="_blank" rel="noopener noreferrer"><i class="fa fa-phone"></i></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>
            </span>
        </div>
    <?php 
    }
    #552898
    Jo

    I’m struggling to understand how I separate the phone icon and social media.

    This is how it currently is.

    add_action( ‘generate_inside_mobile_header’,’tu_mobile_header_html’ );
    function tu_mobile_header_html() { ?>

    <?php }

    How do I add the ‘span’ function you gave me?

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