WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE
This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if window size is changed.
I am looking for a solution to make my navbar responsive without moving around when the page is zoomed in. Any assistance would be highly appreciated.
/* ---------- Navigation ---------- */
nav{
width: 100%;
height: 60px;
font-weight: bold;
color: white;
position: absolute;
bottom: 500px;
left: -250px;
}
nav ul{
float: right;
}
nav ul li{
float: left;
list-style: none;
position: relative;
}
nav ul li a{
font-family: arial;
color: black;
font-size: 20px;
padding: 22px 14px;
display: block;
text-decoration: none;
}
nav ul li ul{
display: none;
position: absolute;
background: #4f88bd;
padding: 10px;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul{
display: block;
}
nav ul li ul li{
width: 180px;
border-radius: 4px;
}
nav ul li ul li a{
padding: 8px 14px;
}
nav ul li ul li a:hover{
background: #26227d;
}
/* ---------- Navigation ---------- */
/* ---------- Header ---------- */
header{
background: #35424a;
color: #ffffff;
padding: 20px;
min-height: 70px;
text-align: center;
}
header h1{
font-size: 50px;
text-align: center;
}
header h1 a{
text-decoration: none;
color: white;
}
/* ---------- Header ---------- */
<header>
<h1><a href="index.html">Olympic Class Liners</a></h1>
<nav>
<ul>
<li><a href="#">Olympic</a>
<ul>
<li><a href="olympic-overview.html">Overview</a></li>
<li><a href="olympic-crew.html">Crew</a></li>
<li><a href="olympic-decks.html">Decks</a></li>
<li><a href="olympic-passengers.html">Passengers</a></li>
</ul>
</li>;
/* Additional List Items Here */
</ul>
</nav>
</header>