- This topic has 89 replies, 14 voices, and was last updated 6 years, 9 months ago by Ian.
-
AuthorPosts
-
November 27, 2014 at 2:39 pm #49573TomLead DeveloperLead Developer
Hi 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.
November 27, 2014 at 2:54 pm #49585Vojtech Paskothank 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 #49676TomLead 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;} }
November 30, 2014 at 10:35 am #50024StephaneHello 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 PaskoHey 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 #50101TomLead 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 π
November 30, 2014 at 10:57 pm #50106StephaneThank you very much Tom. It is working great.
December 1, 2014 at 4:52 am #50164Vojtech PaskoIm fine with solution without search button. Thank you π
December 1, 2014 at 11:50 am #50349TomLead DeveloperLead DeveloperYou’re both welcome π
February 24, 2015 at 1:05 pm #79555KateHi 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 #79632KateI 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 #79693TomLead 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 π
March 9, 2015 at 3:19 pm #84421Mark FlintHi 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 #84560TomLead DeveloperLead DeveloperNice site! π
March 16, 2015 at 2:13 pm #87585Mark FlintHi 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.