I'm currently working with the code snippet below:
header {
height: 110px;
width: 100%;
margin-bottom: 130px;
position: fixed;
top: 0;
z-index: 11;
/*additional styling removed*/
}
nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
width: 78%;
max-width: 1310px;
height: 110px
}
nav li > a, nav li.navAside {
display: inline-block;
float: left;
width: 10%;
height: 110px;
line-height: 110px;
text-align: center;
border-left: 1px solid #7a0202;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
box-sizing: border-box;
transition: all .3s ease-in-out
}
nav li > a {
text-transform: uppercase
}
nav li.navAside {
width: 25%;
user-select: text
}
nav li:last-child {
border-right: 1px solid #7a0202
}
nav li > a:hover, nav li > a:active, #slctd {
background-color: #880b0b
}
To accommodate smaller screens, I've included the following styles:
@media only screen and (max-width: 1300px) {
nav ul {
width: 100%
}
nav li > a {
width: 12.8%
}
.navAside {
width: 36% !important
}
.navAside:first-child {
display: none
}
}
The issue arises with the code block below:
@media only screen and (max-width: 640px) {
header {
height: 50px;
}
nav {
width: 100%;
height: 50px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
nav ul {
width: 100%;
white-space: nowrap;
}
nav li > a {
width: 20%;
min-width: 100px;
height: 50px;
line-height: 50px
}
.navAside {
display: none
}
}
Lastly, here is an excerpt from my HTML markup:
<header>
<nav class="clearfix">
<ul class="clearfix">
<li class="navAside"><img src="img/logo.png" width="146" height="100" alt="Logo" style="margin-top: 4px"></li>
<li><a href="#!" id="slctd">start</a></li>
<li><a href="zimmer.html">zimmer</a></li>
<li><a href="garten.html">garten</a></li>
<li><a href="kontakt.html">kontakt</a></li>
<li><a href="laden/">Laden</a></li>
<li class="navAside"><p>some text</p></li>
</ul>
</nav>
</header>
I'm facing difficulty in aligning the list items in a row on mobile devices for horizontal scrolling. Usually, this setup works but it's not functioning correctly this time. I'm unsure of what might be causing the issue. Any assistance would be greatly appreciated.