While working on a website with a navigation bar, I encountered an issue where the navbar was not responsive. When the window size was reduced, the nav bar shifted to an awkward position vertically, as shown in the first image.
The navbar shifts below the image when the window size is decreased: https://i.stack.imgur.com/EB9ov.png
Normal large window size: https://i.stack.imgur.com/BpgKt.png
I have included the HTML and CSS code below for reference. I tried to make the navbar responsive but I'm struggling to get the desired behavior when the window size decreases.
Reference Video link -> https://www.youtube.com/watch?v=TTbYFzAz-Lg
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Responsive Navigation Bar
</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<body>
<div id="header">
<div id="logo">
<img src="Redbull-logo.png">
</div>
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
}
body{
background: skyblue;
}
#header{
width: 100%;
height: 80px;
background: #333;
box-shadow: 0px 3px 4px gray;
}
#navbar{
width: 1000px;
height: 80px;
float: right;
}
#navbar > li{
width: 198px;
list-style: none;
float: left;
border-right: 1px solid gray;
border-left: 1px solid gray;
}
li > a{
display: block;
color: white;
line-height: 80px;
text-align: center;
font-family: cursive;
font-size: 20px;
text-decoration: none;
}
li > a:hover,
li > a:focus{
background-color: skyblue;
color: #333;
}
#logo{
width: 200px;
float: left;
height: 80px;
padding-left: 40px;
}