I made my menu items to be centered midline with my centered logo and it works in Chrome but in Safari they’re too high, the first 4 are too far left, and one menu item is hidden behind the logo. I have Craft theme. Can anyone help please? Thank you!
Photos of Chrome and Safari attached.
Your issue is likely due to differences in how Chrome and Safari render CSS properties, especially with flexbox, alignment, and padding. Try adjusting your header’s CSS by using flexbox with align-items: center; or ensuring the logo and menu items are inside the same flex container. Also, check for position: absolute or margin differences that may be causing misalignment in Safari. If the issue persists, adding -webkit- prefixes for certain styles or using display: grid; might help standardize the layout across browsers.
Thank you kindly for your response! Where/how would I put the code in? This is what I have in my theme.liquid:
/* Centering menu items on logo */ @media (min-width: 769px) { .header nav.header__inline-menu { position: absolute; z-index: 1; } .header nav.header__inline-menu .list-menu li:nth-child(4) { margin-right: 88px; } .header nav.header__inline-menu .list-menu li:nth-child(5) { margin-left: 88px; } .header .header__heading { z-index: 9; } }Hi Richard, just checking back with you.
I updated my theme.liquid code to this:
/* Centering menu items on logo */ @media (min-width: 769px) { .header nav.header__inline-menu { position: absolute; z-index: 1; } .header nav.header__inline-menu .list-menu li:nth-child(3) { margin-right: 140px; } .header nav.header__inline-menu .list-menu li:nth-child(4) { margin-left: 150px; } .header .header__heading { z-index: 9; } }But am still having issues.
