Archived topic
Social networks visible all time in mobile screen
13 replies · Started by Fernando Díaz Gascón on August 10, 2016
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.
Can you please share an screenshot of what you're trying to accomplish?
This is the current appearance: http://subefotos.com/ver/?be1c56188e544632f3dc3c2f7465fd6ao.png
This is what I want: http://subefotos.com/ver/?b69684ef0f7bd33bdeaab0364c6ce916o.png
Thanks in advance!
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
@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
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
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.
Can you post a link of what you have so far?
I think it might help tom come up with a solution for you :)
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:
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 :)
That's right, before header is the right place.
Definitely, a great solution. Thanks Roberto and thanks to all.
