Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] Mobile header + social icons

Home Forums Support Mobile header + social icons

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #472165
    Carel

    Hi Team

    Thanks for the great theme I am loving it.

    I am trying to get social icons displayed on my mobile header and remove the secondary header menu burger and the primary header menu burger for the mobile header only. I have installed Snipets to add the HTML but the primary menu burger remained after adding both sets of CSS but i am amusing the CSS should have been combined.

    Many thanks

    Martin

    GeneratePress 2.0.1
    #472412
    Leo
    Staff
    Customer Support

    Hi there,

    Your website link requires log in and password.

    Can you provide the actual live link to it?

    I’m assuming this is what you are looking for: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

    #472508
    Carel

    Ye that is indeed what Im looking for but then a step by step guide to remove both burger icons and leaving my logo and social icons on the sticky mobile header.
    I am assuming (Your mobile header HTML in here) is where you put the code for the social icons but how would you make them link to your social website?
    I have no knowledge of CSS or HTML, dont know what they stand for or mean so really could use some assistance 🙂 http://qualitymountaindays.com/ dont even know if that is my live website. Hope that works and excuse the mess

    Many thanks

    #472662
    Leo
    Staff
    Customer Support

    Your PHP would be something like this (using facebook icons for example):

    add_action( 'generate_inside_mobile_header','tu_mobile_header_html' );
    function tu_mobile_header_html() { ?>
        <div class="mobile-header-content">
            <a href="https://YOUR-FACEBOOK-LINK-HERE"> <i class="fa fa-facebook-square"></i></a>
        </div>
    <?php }

    You will need to replace YOUR-FACEBOOK-LINK-HERE and choose the icons here: http://fontawesome.io/icons/

    CSS would be the same as this one: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

    Hide the mobile toggle on sticky mobile header should be this:

    @media (max-width: 768px) {
        .mobile-header-logo .main-navigation.navigation-stick.mobile-header-navigation .menu-toggle {
            display: none;
        }
    }
    #472855
    Carel

    🙂 DUDE nice one. almost where I want it just slightly lower how do you get it next to my logo? oh and also how to I make my logo bigger on mobile and smaller on desktop?

    #472916
    Leo
    Staff
    Customer Support

    Hmm I’m not seeing any CSS being added currently?

    #472939
    Carel

    Sorry I have no idea,
    I added @media (max-width: 768px) {
    .mobile-header-logo .main-navigation.navigation-stick.mobile-header-navigation .menu-toggle {
    display: none;
    }
    }
    in the additional CSS tab in the GP customizer

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

    <?php }

    in the snipets plugin
    and it is working how i want it on my end just not at the height i want it

    #473006
    Carel

    Hi Leo
    I have tried something different that could work with some help. I have replaced my normal menu with my social menu and now I only want to see see the actual social icons and my logo in the mobile site if possible even if they are small
    Many thanks

    #473075
    Carel

    Hi again
    I found a video explaining how to use elementor to do it so ill give that a shot thank for the help

    #473138
    Leo
    Staff
    Customer Support

    Ok let me know if you want to use GP instead.

    We were pretty close I think.

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