I've encountered an issue with my website where the navbar automatically stacks on Safari and IOS devices, but not on other browsers.
My aim is for the navbar to only stack at a specific screen width, and it shouldn't be stacking at all on my computer screen. However, it does when viewed in Safari.
Below is a snippet of my CSS code: Thank you
.Nav {
background:url(//p2.zdassets.com/hc/theme_assets/521042/200069254/bg-dark.jpg);
border: 1px solid #ccc;
border-right: none;
width: 100%;
margin-bottom: 0px;
}
.Nav ul {
margin: 0;
padding: 0;
}
.Nav ul li {
list-style: none;
text-align: center;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
}
.Nav ul li:first-child {
border-left: none;
}
.Nav ul li a {
display: block;
text-decoration: none;
color: #FFF;
padding: 10px 0;
}
.Nav ul li a:hover {
display: block;
text-decoration: none;
color: #bec3c6;
padding: 10px 0;
}
.Nav {
display: table;
table-layout: fixed;
}
#Ul {
display: flex;
flex-direction: row;
}
#Ul li {
flex-grow: 1;
}
/*To make it Responsive*/
@media (max-width: 330px) {
#Ul {
display: block;
}
.Nav {
font-size: .8em;
width:100%;
}
.Nav ul li {
display: block;
border-bottom: 1px solid #ccc;
}
}Here is the HTML as well:
<subheader>
<div class="Nav">
<ul id="Ul">
<li><a href="" target="new">Homepage</a></li>
<li><a href="">Downloads</a></li>
<li><a href="">Downloads</a></li>
<li><a href=""target="new">Help</a></li>
<li><a href="">Submit a Ticket</a></li>
<li><a href="" target="new">Contact</a></li>
</ul>
</div>
</sidebar>