- This topic has 4 replies, 3 voices, and was last updated 7 years, 7 months ago by .
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- You must be logged in to reply to this topic.
Home › Community Forums › Epik Theme Support › Secondary Nav Floats Wrong Responsive
Tagged: icon gaps, mobile responsive, secondary nav
Hi,
I’m having an issue where I have social media icons in the secondary nav, and I’ve floated this right. It’s working okay when browser is full width, but once the “hamburger” pops in as the viewport shrinks, the social icons float left, reverse order and have a large gap between them.
I don’t mind that the icons move to the left, but would like to cure the large gap between them first and foremost, and would still like twitter to pop up before facebook if possible.
Here’s the issue:
http://tor.jokeproductions.com
Thanks!
Biagio
Add this to your Responsive section (767 width) –
#menu-social-media .menu-facebook,
#menu-social-media .menu-twitter {
float: right;
}
You can add it under the section labeled as this –
/* iPhones (portrait and landscape)
--------------------------------------------- */
@media only screen and (max-width: 767px) {
Thanks Wes. That solved all the spacing issues. One last question — now that I’ve looked at it on the iphone, it’s a little hard to get to them since they’re right above the hamburger. Is it possible to keep this same spacing but have them jump to the left hand side? I tried the code you gave me with “float left” instead, but it was the same issue with the big gap between them.
Thanks so much for your help!
Best,
Biagio
Biagio,
Perhaps a plug-in? I have used this and it is great. Works on Iphone too. This puts the social medial icon on the webpage and it “floats”. This is someting to try, and see if you like what it does.
Thanks, Andykev. We might actually check that out for our blog and podcast. We’re going a little smaller and less obvious on our business site (at my wife and business partner’s request) but I really do like the plugin.
I think my main goal right now is to try to figure out how to lower those two icons, or if there’s a better place to put them in the theme other than secondary nav.
Thanks!
Biagio