Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, it switches to a vertical layout in Safari. This causes significant problems especially when trying to incorporate a sticky scroll navigation bar into the design.
I'm still relatively new to coding. I created my first website from scratch here as part of my portfolio, but it's hard to showcase my work if it doesn't display correctly on the main browsers such as Safari, Chrome, and Firefox. I have tried searching for solutions here, but nothing seems to address this specific issue.
I even checked caniuse.com (caniuse.com/#feat=flexbox) and reviewed the bugs mentioned there. However, this particular problem is not listed among the known issues on Github. I did come across a similar pen on Github (codepen.io/philipwalton/pen/NqLoNp), where they utilized 'display block' on .FlexItem (in my case, the li element) before applying it to .FlexContainer (navList). Unfortunately, that didn't solve my issue either.
relevant HTML —
<nav>
<ul class="navList">
<li><a href="index.html">Home</a></li>
<li><a href="mLe_pages/mLe_PORTFOLIO.html">Portfolio</a></li>
<li><a href="mLe_pages/mLe_ABOUT.html">About</a></li>
<li><a href="mLe_pages/mLe_BLOG.html">Blog</a></li>
<li><a href="mLe_pages/mLe_SAMPLE.html">Sample</a></li>
<li><a href="mLe_pages/mLe_PROJECT.html">Project</a></li>
<li><a href="mLe_pages/mLe_CONTACT.html">Contact</a></li>
</ul>
</nav>
my relevant Css —
.navList {
display: flex;
justify-content: space-between;
padding-left: 6.82%;
padding-right: 15.91%;
margin-bottom: 3.41%;
height:auto;
list-style:none;
font-size: 3.25vw;
text-style: bold;
white-space: nowrap;
background-color: white;
}
/*divs for sticky nav bar*/
nav {
width: 100%;
height: auto;
z-index:500;
}
This marks my first post on stackoverflow, so any guidance provided would be truly appreciated. My goal is to align the navigation bar to match the left and right edges of the header gif I am using (hence the specific padding percentages). Therefore, I believed that utilizing flexbox would be the ideal solution for what I am attempting to achieve.
Thank you in advance for any assistance! (apologies for the limited number of links due to my low reputation)
Sincerely, Em