When in full screen, the Navbar links are displayed horizontally.
https://i.stack.imgur.com/0mOLp.png
However, when the width changes, they appear like this
https://i.stack.imgur.com/2ylgZ.png
Is there a way to ensure they shift to the left while maintaining their horizontal layout?
HTML
<nav>
<h1 id=>Nav</h1> <div id="NHide">
<ul>
<li><a class="NavL" href="#slide1" title="Sample Text">Slide 1</a></li>
<li><a class="NavL" href="#slide2" title="Sample Text">Slide 2</a></li>
<li><a class="NavL" href="#slide1" title="Sample Text">Slide 3</a></li>
<li><a class="NavL" href="#slide1" title="Sample Text">Slide 4</a></li>
</ul>
</nav>
CSS
#NHide{
position:absolute;
left:77%;
top:0%;
}
nav {
position: fixed;
z-index:1;
font-size: 24px;
width: 100%;
line-height: 48px;
height: 48px;
background: #000;
text-align: left;
font-family: 'PT Sans', sans-serif;
color: #fff;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float:left;
}
li {
display:inline-block;
}
.NavL {
display: block;
width: 100px;
}