Cart icon is overlapping menu in Safari browser

[chriscaldwell11]

Hello,

I'm experiencing a strange issue when viewing my development site in Safari browser.

What is happening is that the cart icon overlaps the menu items then resizing the browser, that is, when making the browser window smaller. This issue does not occur in Chrome. I've only checked Mac Safari and Mac Chrome. 

The site is here:

https://floatron.myshopify.com/

Screenshot attached.

Any help on fixing this would be appreciated.

Thank you

Chris

[Spac-es]

Hello!

I have managed to solve the error you mentioned as well as subtly improve the header design on PC devices. I hope you like the changes!

You can add the following code to your base.css file:

@media (min-width: 990px) {
  header.header.header--top-left.header--mobile-center.page-width.header--has-menu {
    display: flex;
    justify-content: center;
  }

  #shopify-section-sections--17857575846102__header nav.header__inline-menu {
    position: relative !important;
    margin: 0 !important;
    padding: 28px 0px !important;
  }

  .header__icons {
    display: flex;
    padding: 0px !important;
    position: relative;
    margin-left: 0vw 4vw;
  }

  .list-menu--inline {
    justify-content: center;
    align-items: center;
  }

  ul.list-menu.list-menu--inline a {
    display: block !important;
  }

  h1.header__heading {
    min-width: 22vw;
  }
}

Result:

[chriscaldwell11]

Hello Spac-Es,

Thank you so much for taking the time to do this! I really appreciate it. Also, I was wondering about where you have positioned the logo, it seems like it should be further to the left, no? (Aligned with the product image on the left, I mean).  How do I move logo  to the left?

[Spac-es]

Of course! Remove this line of code if you want to align the logo to the left instead of centering all the elements:

justify-content: center;

The code will look something like this:

@media (min-width: 990px) {
  header.header.header--top-left.header--mobile-center.page-width.header--has-menu {
    display: flex;
  }

  #shopify-section-sections--17857575846102__header nav.header__inline-menu {
    position: relative !important;
    margin: 0 !important;
    padding: 28px 0px !important;
  }

  .header__icons {
    display: flex;
    padding: 0px !important;
    position: relative;
    margin-left: 0vw 4vw;
  }

  .list-menu--inline {
    justify-content: center;
    align-items: center;
  }

  ul.list-menu.list-menu--inline a {
    display: block !important;
  }

  h1.header__heading {
    min-width: 22vw;
  }
}

[chriscaldwell11]

Hello, I thank you again for your help! To clarify, I was wanting to align the logo and the menu  to the pictures underneath.  Here's a screenshot that I hope makes sense. Thank you for fixing the cart overlap situation. I just think it may look better to align the the logo and menu to the page, no?  Thanks again.

[Spac-es]

The code I provided should work flawlessly. I have double-checked it, and it looks perfect on my screen. I have also tested it on portable devices and haven't encountered any issues.

If you have any further questions, please don't hesitate to ask! Remember to mark my response as the solution if it was helpful!

[chriscaldwell11]

Hello, your kindness and help is appreciated. The code that you had provided worked very well, except the header section didn't align to the edges of the photos, it was not expanded as indicated in the photo I attached after you sent it. A friend off-site gave me some tweaks, and now it works flawlessly! Here's the additional CSS and commenting  that was added to what you so graciously provided. I am very appreciative of your help:

/* fixes issue in Safari where cart icon overlaps menu items as you shrink browswer window */

@media (min-width: 990px) {
nav.header__inline-menu {
justify-self: unset !important;
}
nav.header__inline-menu {
margin: 0 !important;
}
/* header.header.header--top-left.header--mobile-center.page-width.header--has-menu {
display: flex;
justify-content: center;
} */

/* #shopify-section-sections--17857575846102__header nav.header__inline-menu {
position: relative !important;
margin: 0 !important;
padding: 28px 0px !important;
} */
a.header__heading-link {
flex: 1;
}
.header__icons {
display: flex;
padding: 0px !important;
position: relative;
margin-left: 0vw 4vw;
}

.list-menu--inline {
justify-content: center;
align-items: center;
}

ul.list-menu.list-menu--inline a {
display: block !important;
}

h1.header__heading {
min-width: 22vw;
}
}

[chriscaldwell11]

Hello Deejah02,

Thank you for this helpful information, which I can certainly benefit from in the future. For now, it looks like Spac-Es code has fixed the issue. But I'm grateful for your kind assistance.