• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Secondary Nav Floats Wrong Responsive

Home › Community Forums › Epik Theme Support › Secondary Nav Floats Wrong Responsive

Tagged: icon gaps, mobile responsive, secondary nav

  • This topic has 4 replies, 3 voices, and was last updated 7 years, 7 months ago by JokeAndBiagio.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 29, 2015 at 6:33 pm #16332
    JokeAndBiagio
    Customer

    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

    August 29, 2015 at 9:29 pm #16336
    Wes
    Moderator

    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) {
    August 30, 2015 at 1:48 am #16343
    JokeAndBiagio
    Customer

    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

    August 30, 2015 at 1:53 am #16344
    Andykev
    Customer

    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.

    https://wordpress.org/plugins/floating-social-media-icon/

    August 30, 2015 at 2:14 pm #16345
    JokeAndBiagio
    Customer

    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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework