[Resolved] Mobile Social Icons

Home Forums Support Mobile Social Icons

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #120564
    Alec Stewart

    I want to start off by saying that everything about this theme has been excellent so far. I rarely purchase add-on items, but I did for this theme and I’m so glad I did! Job well done with everything.

    As for my concerns… I recently added the nav bar social icons to my website following this post.

    The icons look and work great on a desktop computer. However, on my phone, the icons are to the right side and don’t appear to be part of the mobile nav bar like they do when I go to generatepress.com. Essentially, I want them exactly as they are on the mobile site of GeneratePress, but my icons aren’t part of the drop down menu nor do they float to the left side. Any idea of what I can do?

    #120671
    Tom
    Lead Developer
    Lead Developer

    Hi Alec,

    Glad you’re enjoying GP!

    Recently, I added a class into GP by default which you can use for this purpose, which means you don’t need to add your own CSS.

    In “Appearance > Menus”, you can give your menu items you want to float right this class: menu-item-float-right

    That should do it! 🙂

    #120708
    Alec

    I removed all the custom CSS that I previously added and gave the menu items that class name, but now my icons don’t appear at all.

    #120719
    Tom
    Lead Developer
    Lead Developer

    Can you link me to the page possibly?

    #120724
    Alec

    I got them to appear (not sure if it was the browser I was using to view them), but they aren’t all the way to the right in the nav bar like they used to be. You can see here.

    #120730
    Tom
    Lead Developer
    Lead Developer

    Ah, it’s because your menu is centered – it might look a little weird if you float them to the right (the other items will be off center).

    This CSS should do it:

    @media (min-width: 769px) {
    	.sf-menu > li.menu-item-float-right {
    		float: right !important;
    	}
    }
    
    @media (max-width: 768px) {
    	.sf-menu > li.menu-item-float-right {
    		float: none !important;
    		display: inline-block;
    	}
    }
    #120742
    Alec

    That did it! Thanks a bunch!

    #120758
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.