[Resolved] Mobile Social Icons

[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?

[Tom]

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! 🙂

[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.

[Tom]

Can you link me to the page possibly?

[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.

[Tom]

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;
	}
}

[Alec]

That did it! Thanks a bunch!

[Tom]

No problem! 🙂

[Author]

Posts