- This topic has 89 replies, 14 voices, and was last updated 3 years, 5 months ago by
Ian.
-
AuthorPosts
-
November 27, 2014 at 2:39 pm #49573
Tom
Lead DeveloperLead DeveloperHi there,
You can add this CSS to your site to fix that issue:
@media screen and (max-width: 768px) { .social-icon {float: none !important;} }
As for the second issue, I’ll take a look – it may be a bug.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 27, 2014 at 2:54 pm #49585Vojtech Pasko
thank you for such a quick reply, but it does not work.
It remains the same, at mobile version if i click on google or facebook icon at my page it opens search tab same as in search icon case. At deskop and tablet version its fine.
I did put it into custom css, deleted the previous one and also tried to put it at new line with keeping the original one. Same result except at desktop version without original float right was icons aligned at left same as rest items at menu.
sorry for my bad English i hope you do understand me.
November 28, 2014 at 12:01 am #49676Tom
Lead DeveloperLead DeveloperYou need to have both pieces of code.
The first applies to browsers, the second applies to screens smaller than 768px.
So, your complete code would be:
.social-icon { float: right !important; } @media screen and (max-width: 768px) { .social-icon {float: none !important;} }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 30, 2014 at 10:35 am #50024Stephane
Hello Tom,
It is working.
.secondary-navigation li.social_icon { float: right; }
It is ok
.secondary-navigation li.social_icon.facebook a { background: #whatever color; } .secondary-navigation li.social_icon.facebook a:hover { background: #whatever color; }
I replace by this
.secondary-navigation li.social_icon a { background: #whatever color; } .secondary-navigation li.social_icon a:hover { background: #whatever color; }
because I don’t see how to apply the “facebook” CSS on the A element in the menu? And have individual behaviors on each social icons.
November 30, 2014 at 12:50 pm #50042Vojtech Pasko
Hey Tom, i have custom css exactly how have you wrote, but its still same. Maybe it is a android bug. Its doing at chrome and default android browser the same thing.
If you have search button enabled then it is at the same row as social icons at smartphone web. Then everything you press at that page is like pressing search. If i disable search button than it works well. So i did…
I will put search somewhere else. Thanks for help
November 30, 2014 at 6:44 pm #50101Tom
Lead DeveloperLead Developer@Stephane – in order to apply different styles to each button (facebook, twitter), you need to add that additional class to the element that you’ve added “social_icon” class to.
So in the “CSS Classes” area you would put “social_icon facebook” instead of just “social_icon”.
Let me know if that makes any sense.
@Vojtech – that’s weird, I tested and it worked for me. I went to take a look at your site, but it appears you removed the search button.
Let me know if you want more help π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 30, 2014 at 10:57 pm #50106Stephane
Thank you very much Tom. It is working great.
December 1, 2014 at 4:52 am #50164Vojtech Pasko
Im fine with solution without search button. Thank you π
December 1, 2014 at 11:50 am #50349Tom
Lead DeveloperLead DeveloperYou’re both welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 24, 2015 at 1:05 pm #79555Kate
Hi Tom
I’m having trouble and need help getting FB and Twitter buttons to appear on my menu as on generatepress.com. I’m pretty sure I’ve followed the steps you outlined above, but they won’t swing to the right. Any ideas?
I can’t get Facebook to appear either, but that’s not your problem π
Cheers
KateFebruary 24, 2015 at 5:38 pm #79632Kate
I found more advice and made this work, though not quite how I’d like… I’ll need to learn a lot more code before I finally crack this π
I have another query on a different topic, will post a fresh topic.
Thanks!
February 24, 2015 at 11:23 pm #79693Tom
Lead DeveloperLead DeveloperHi Kate,
If you can link me to your site I can see how you’ve done it and can offer a better way if it exists π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 9, 2015 at 3:19 pm #84421Mark Flint
Hi all,
I had the same issue as Rene with the social icons not aligning to the right, but Tom’s !important fix worked a treat for me too. Cheers Tom!
March 9, 2015 at 11:15 pm #84560Tom
Lead DeveloperLead DeveloperNice site! π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 16, 2015 at 2:13 pm #87585Mark Flint
Hi Tom,
Another question on this for a new site this time: http://www.strawberryshop.flintmarketing.co
I’ve added the social media icons as before and they’ve aligned to the right as intended, but as the rest of the menu was aligned to the centre the social media icons have pushed the rest off-centre. Do you know a CSS override that would centralise them again? I tried:
.menu_item {
float: centre !important;
}But it didn’t work.
Thanks,
Mark -
AuthorPosts
- You must be logged in to reply to this topic.