Menu Alignment in Safari

  • I recently made a site using the Origin theme and SiteOrigin CSS Editor. The page looks right in Chrome and Firefox, but the <div class=”menu”> will not center in Safari. I’ve looked into media queries for Safari, but am hitting a wall. Any thoughts? Thanks in advance.

    Here is the site:

    https://www.julesheller.net

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi berniexltd,

    You’ll want to add some support for Safari for the FlexBox layout. You currently have the following in your CSS:

    #menu-primary.site-navigation.menu-container {
    padding-right: 20px;
    display: flex;
    float: none;
}

    Adding either display: -webkit-flex; or display: -webkit-box; should do the trick. I tried it with display: -webkit-box; and the menu centered over the image. You might want to add both just to be sure. So, you’d end up with:

    #menu-primary.site-navigation.menu-container {
    padding-right: 20px;
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    float: none;
}
    Thread Starter berniexltd

    (@berniexltd)

    Thanks so much! That did the trick.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Menu Alignment in Safari’ is closed to new replies.