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

[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 5 years, 3 months ago by Fernando Díaz Gascón.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #217129
    Fernando Díaz Gascón

    Hello,

    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.

    #217137
    Roberto Enrique

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

    #217157
    Fernando Díaz Gascón
    #217164
    Craig

    following this thread

    #217165
    Roberto

    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

    http://www.loscirocco.it

    #217172
    Fernando Díaz Gascón

    @Craig, I do not see the thread.


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

    Thanks a lot

    #217176
    Tom
    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

    #217180
    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.

    #217198
    Craig

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

    #217224
    Stacey Usborne
    Staff
    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 🙂

    #217328
    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>
        </ul>
      </div>
    </div>
    
    

    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

    
    .social-bar{
        background-color:#bde2ff;
        padding:10px 0;
    }
    
    .social-list {
        list-style: outside none none;
        margin:0;
    }
    
    .social-list li{
        display: inline;
        margin-left:0.5em;
    }
    
    @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:

    http://onepager.artomultiplo.net/

    #217340
    Tom
    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 🙂

    #217349
    Roberto Enrique

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

    #217382
    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.