[Support request] following buttons

Home Forums Support following buttons

This topic contains 17 replies, has 4 voices, and was last updated by  Tom 1 month, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #806728

    Guna

    Hello!
    My friends have told me that my following buttons have an excellent place in my website goitdoit.com when opened on a computer, but in the mobile version, nobody scrolls so much down to find them. So my question is, how can I move following buttons on my primary menu between menu lines and the search icon, but only on the mobile version, keeping them the same place where they are now on a computer version?
    Regards,
    Guna

    GeneratePress 2.2.2
    #806827

    Leo Customer Support

    Hi there,

    I assume the Follow me widget is the only sidebar widget you want to move on top and not the About me widget?

    If so try adding the same widget in the header widget area, then we can hide it on desktop using this CSS:

    @media (min-width: 769px) {
        .header-widget {
            display: none;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know 🙂

    #806862

    Guna

    Hello!
    Yes, exactly, it is only follow me widget, and even without the words: follow me, just the 3 buttons. However, visually I think they would look better in Menu/search area, just in the middle,between them, not on header, is it possible?
    Regards,
    Guna

    #806967

    Leo Customer Support

    Little more complicated to add them inside the mobile menu bar as there is no widget area.

    – First, you need to load FontAwesome:
    https://docs.generatepress.com/article/font-awesome/

    – Create a new hook element:
    https://docs.generatepress.com/article/hooks-element-overview/

    – Select the icons from this page:
    https://fontawesome.com/icons?d=gallery

    – Add the icons like this in hook element content:

    <div class="mobile-social-icons">
        insert social icons here
    </div>

    – Select inside_mobile_menu_bar in the Hook dropdown menu.

    – Go to Display Rules tab and set it to Entire site.

    Once this is done I can provide the CSS.

    #807127

    Guna

    Hello Leo!
    Yeah, I can see that this option and my technical knowledge are very distant from each other, but I will try to understand.
    I have done what you said but I cannot find the inside_mobile_menu_bar and I am not sure what to write in the big empty field under the hook title, the code you gave me or the code that was generated in FontAwesome when I chose the button. I will send you now the screenshot of what I have done to see if it’s correct, with both option in the empty field.
    Regards,
    Guna

    #807548

    Leo Customer Support

    I’ve uploaded your screenshot here so it’s easier for us to track:
    https://i.postimg.cc/cCF96Kg6/Screen-Shot-2019-02-11-at-11-57-55.png

    Please do the same using the site below in the future and provide the direct links here:
    https://postimages.org/

    This should be your hook content:

    <div class="mobile-social-icons">
        <a href="your link here"> <i class="fa fa-facebook"></i></a>
        <a href="your link here"> <i class="fa fa-instagram"></i></a>
        <a href="your link here"> <i class="fa fa-pinterest"></i></a>
    </div>

    You will need to replace your link here with the actual links.

    And this would be the settings:
    https://www.screencast.com/t/OnzaR7EC
    https://www.screencast.com/t/XdRN7I7O

    #807562

    Guna

    Hello again!
    Ok,I will opload the files on your given site in the future and I have done everything that you said. The only thing I didn’t understand is where exactly is the: “you link here” option as I didnt see it anywhere and what are the actual links, are they the ones with my social media where i want people to follow me?
    Also what about the link that was generated by the Fontawesome, where do I place that one?
    Sorry if my questions seem stupid, but I am very bad at all this, though trying my best.

    #807815

    Leo Customer Support

    are they the ones with my social media where i want people to follow me

    Yes exactly 🙂

    #807987

    Guna

    OK, cool, but then can you please tell me steps how to get to this “you link here” thing?

    #807999

    Leo Customer Support

    They should be the same links that you’ve added in the lightweight social icon widget.

    The links that go to your Facebook, Instagram profiles.

    #823644

    Guna

    Hello Leo, sorry for the late reply, were on the trip, but now I am back in the game:-)
    I have replaced the links with my actual links, but still, don’t see anything on my menu, why is that?

    #823959

    Tom Lead Developer

    Your HTML is broken.

    Make sure your links are surrounded by quotation marks, and that there’s a > character before your icon HTML.

    If you copy the HTML Leo provided exactly and only replace the your link here text with your URLs, you should be good to go.

    #824894

    Guna

    Hello Tom,
    Yes, I revised it and did it the way you said (I just don’t know what icon HTML means) and the icons indeed appeared on my mobile menu, however completely scattered. What should I do to align them next to each other in the very center where the menu compartment is?
    Regards,
    Guna

    #825092

    Tom Lead Developer

    Try reducing your menu item width on mobile in Customize > Layout > Primary Navigation: https://docs.generatepress.com/article/menu-item-height-width/

    #825680

    Guna

    Yes, helped indeed! However, the search icon doesnt want to be on the same line no matter how much I reduced the size. How do I deal with that one?
    What I would like to achieve is that those 3 icons following buttons are in the very middle, but the search icon on the right.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.