Cart icon is overlapping menu in Safari browser

chriscaldwell11
Shopify Partner
15 1 4

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

ChrisScreen Shot 2024-05-22 at 6.04.17 PM.png

 

 

Replies 7 (7)

Spac-es
Shopify Partner
374 109 130

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:result.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
chriscaldwell11
Shopify Partner
15 1 4

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
Shopify Partner
374 109 130

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

 

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
chriscaldwell11
Shopify Partner
15 1 4

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.Screen Shot 2024-05-23 at 11.04.41 AM.png

Spac-es
Shopify Partner
374 109 130

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.

 

1.PNG

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

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
chriscaldwell11
Shopify Partner
15 1 4

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
Shopify Partner
15 1 4

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.