Home>Support>Vantage Theme: Main Menu left-aligned collapsing in Safari

Vantage Theme: Main Menu left-aligned collapsing in Safari

By TJCLearning, 9 years ago. Last reply by Magus, 9 years ago.

Lately, I had the same issues with Firefox and Chrome, so with your help, I added custom CSS:
/* Main Menu With Across Browsers */

body.has-menu-search .main-navigation ul {
margin-right: 44px !important;
}

But, the menu doesn't appear in one line as other browsers. What can I do?

Thanks for your help!!!

ps. can't select Theme from the drop down below. I'm using Vantage.

URL: http://www.inlogic.ca

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi TJCLearning

    I am not seeing any differences between any browser. Would it be possible for you to upload a screenshot to your site and link to that.

    Thanks

    Magus

  2. 9 years, 4 months ago TJCLearning

    Hi Magus,

    Here’s the screenshot.
    http://www.inlogic.ca/images/safari_view.png

    Thanks :)

  3. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi TJCLearning

    Please try the following in your custom CSS

    .main-navigation ul li a {
        padding: 20px 33px !important;
    }
    

    I can only see this issue in safari which handles fonts differently than other browsers, which is why you are seeing this problem. the above should help without making too much of an impact on the way other browsers render the content.

    Magus

  4. 9 years, 4 months ago TJCLearning

    Sorry Magus, but it didn’t solve the problem….

  5. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi TJCLearning

    The problem looks resolved on my end, displaying the same in all browsers including Safari.

    It might be the browser cache. Try clearing your browser cache, and then refreshing the page to see if that helps.

    Magus

  6. 9 years, 4 months ago TJCLearning

    nope…after resetting safari, tried, but remains the same.
    should i delete the previous CSS?

  7. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi TJCLearning

    Leave the original CSS and change the second figure ’33px’ down 1 at a time until you get the desired result.

    Magus

  8. 9 years, 4 months ago TJCLearning

    Yup, it worked at 32. Ha!
    Thanks a lot!!

    Just wondering…currently I have 2 CSS’ as you guys suggested, both for the same issue in different browsers:

    .main-navigation ul li a {
    padding: 20px 33px !important;
    }

    body.has-menu-search .main-navigation ul {
    margin-right: 44px !important;
    }

    Do i really need them both?

  9. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi TJCLearning

    yes, you should keep both options. they both target different aspects of the menu. The one I just provided targets the area around the menu text and the original one targets the menu alignment on the page.

    Magus

  10. 9 years, 4 months ago TJCLearning

    thanks for the kind explanations and great help!!!

  11. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi TJCLearning

    You are welcome. If you need any more help please feel free to open a new support thread.

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More