My nav menu looks different in other browsers

[jennylynn]

Hello,

I added social icons to the Primary nav bar. It looks fine in my computer but when I check other browsers it looks different
url http://diezmejores.mis-remedios-caseros.com
plugin style sheet http://diezmejores.mis-remedios-caseros.com/wp-content/plugins/social-media-widget/social_widget.css
theme style sheet http://diezmejores.mis-remedios-caseros.com/wp-content/themes/lifestyle-pro/style.css

This is how I want it to look

This is how it looks in other browsers

What I did was
Using simple sidebars, I created a Social Menu sidebar. Then I installed Social Media Widget plugin and added it to the Social Menu sidebar. Then I added this code to the plugin's style sheet.

#nav .widget {
float: left;
margin-right: 0;
}

.socialmedia-buttons {
margin-top: -70px;
margin-left: 800px;
}

.menu-primary .socialmedia-buttons a {
float: left;
border-left: none;
padding: 0;
}

.menu-primary .socialmedia-buttons img {
margin-bottom: 20;
}

[David Chu]

Hi,
All my browsers look great, so I can't replicate it. Maybe you're getting flak from the dreaded Safari or something. 🙂

Your CSS for .socialmedia-buttons is somewhat eccentric IMO, although it might be OK. I have a quick suggestion - try adding explicit height as per below. It may corral those rambunctious little suckers! You could also code an explicit width. Otherwise, maybe they just run amok.

.socialmedia-buttons {
  height: 32px;
  margin-left: 800px;
  margin-top: -70px;
}

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[jennylynn]

Thank you so much! adding a width did the trick 😀

[David Chu]

Excellent. 🙂

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts