[Support request] following buttons

[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

[Leo]

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 🙂

[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

[Leo]

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.

[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

[Leo]

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

[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.

[Leo]

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

Yes exactly 🙂

[Guna]

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

[Leo]

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.

[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?

[Tom]

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.

[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

[Tom]

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

[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.

[Author]

Posts