[Resolved] Social networks visible all time in mobile screen

Home Forums Support [Resolved] Social networks visible all time in mobile screen

Home Forums Support Social networks visible all time in mobile screen

  • This topic has 13 replies, 5 voices, and was last updated 6 years, 7 months ago by Fernando Díaz Gascón.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #217129
    Fernando Díaz Gascón


    I have made the social networks icons using the secondary menu, but I would like them to show also in mobile. When I see them in mobile I see the navicon, but I would like to see directly the icons.

    Some way to do this?

    Thanks in advance.

    Roberto Enrique

    Can you please share an screenshot of what you’re trying to accomplish?

    Fernando Díaz Gascón

    following this thread


    This is better done with gp-hooks add-on.

    Right now I’m on the cellphone, tonight, if no one gives you a solution, as soon as I arrive to my home I’ll post what I use.

    You can see something similar here


    Fernando Díaz Gascón

    @Craig, I do not see the thread.

    , any help will be welcomed. I like the solution in loscirocco. It is very smart.

    Thanks a lot

    Lead Developer
    Lead Developer

    Roberto’s solution looks awesome.

    If you want to use the navigation and not have it collapse on mobile, this might help: https://generatepress.com/forums/topic/secondary-navigation-on-mobile-question/#post-120014

    Fernando Díaz Gascón

    Thanks Tom. I have it almost. With your solution I can get in mobile screens the social icons in the right side and in a column. Is it possible to get them centered and in a row, only for narrow screens?

    Waiting also for Roberto solution to see another way.


    Hey Fernando, I was just saying I was following this thread, hoping to see updates. Thx.

    Stacey Usborne
    Customer Support

    Can you post a link of what you have so far?

    I think it might help tom come up with a solution for you 🙂

    Roberto Enrique

    Ok, here is what i do:
    I create a list of icons manually and place it in the wp_head hook (don’t know if it is the best hook use, but it works):

    <div class="social-bar">
      <div class="grid-container">
        <ul class="social-list">
    	<li><a href="http://www.facebook.com/"><i class="fa fa-facebook"> </i> <span class="hide-on-mobile">Facebook</span></a></li>
    	<li><a href="http://www.twitter.com"><i class="fa fa-twitter"> </i> <span class="hide-on-mobile">Twitter</span></a></li>
    	<li><a href="http://www.pinterest.com"><i class="fa fa-pinterest"> </i> <span class="hide-on-mobile">Pinterest</span></a></li>

    As you can see I’m using unsemantic’s “hide-on-mobile” class to hide the text strings labels on mobile

    And this is the CSS

        padding:10px 0;
    .social-list {
        list-style: outside none none;
    .social-list li{
        display: inline;
    @media screen and (max-width: 768px) {/*mobile*/
    .social-bar {
        text-align: center;

    and that’s it, you can add as many icons you want like that and control how they look easily 🙂

    you can see the demo here:


    Lead Developer
    Lead Developer

    Nice, great job!

    One tip – wp_head is meant for scripts. I would definitely suggest placing it inside the “Before Header” hook as that will place it within the <body> element where HTML should be.

    Thanks for sharing your code, Roberto! Super helpful 🙂

    Roberto Enrique

    That’s right, before header is the right place.

    Fernando Díaz Gascón

    Definitely, a great solution. Thanks Roberto and thanks to all.

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