My nav menu looks different in other browsers

Community Forums Forums Design Tips and Tricks My nav menu looks different in other browsers

This topic is: resolved

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #67845

    jennylynn
    Participant
    Post count: 31

    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
    screenshot

    This is how it looks in other browsers
    scrnsho

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

    • This topic was modified 1 year ago by  jennylynn.
    • This topic was modified 1 year ago by  jennylynn.
    • This topic was modified 1 year ago by  jennylynn.
    • This topic was modified 1 year ago by  jennylynn.
    #67859

    David Chu
    Participant
    Post count: 1373

    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.

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

    Cheers, Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #67868

    jennylynn
    Participant
    Post count: 31

    Thank you so much! adding a width did the trick :D

    #67870

    David Chu
    Participant
    Post count: 1373

    Excellent. :)


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.