Recently, I attempted to create a new header with a responsive logo and menu. After seeking guidance from StackOverflow experts, everything seems to be functioning correctly now.
However, I am facing an issue regarding the gap between the header and navbar, as shown in the attached image.
I have tried using margin-bottom, vertical-align, and position properties to fix this gap, but none of them seem to be working.
function myFunction() {
var x = document.getElementById("nav");
console.log(barIcon)
if (x.className === "navbar") {
x.className += " responsive";
var barIcon = document.getElementsByClassName('fa-bars')[0];
barIcon.classList.add("fa-times");
barIcon.classList.remove("fa-bars");
} else {
var closeIcon = document.getElementsByClassName('fa-times')[0];
closeIcon.classList.remove("fa-times");
closeIcon.classList.add("fa-bars");
x.className = "navbar";
}
}#logo {
background: transparent url("images/airlineshq-logo.jpg") no-repeat scroll 0% 0%;
width: 1040px;
height: 160px;
border: 0;
margin-bottom: 0;
}
@media only screen and (max-width: 600px) {
#logo {
width: 100%;
}
}
.navbar {
overflow: hidden;
background-color: #0000ff;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
height: 18px;
}
.active {
background-color: #0033CC;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover,
input:hover {
background-color: #dddddd;
color: black;
}
/* CSS for search box */
.navbar .search-box {
float: right;
position: relative;
margin-top: 3px;
padding-right: 30px;
display: flex;
}
.navbar .search-box input {
padding: 12px;
border: none;
width: 100%;
height: 100%;
padding: 10px;
}
.navbar .search-box button {
color: #999;
border: navajowhite;
padding: 10px;
}
@media screen and (max-width: 600px) {
.navbar a,
.navbar .search-box,
.navbar .search-icon {
display: none;
}
.navbar a.icon {
float: left;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .search-box {
float: none;
display: flex;
width: 90%;
padding: 4%;
border: 2px solid black;
}
.navbar.responsive .search-icon {
display: flex;
}
}<div class="content">
<header id="logo"></header>
<div class="navbar" id="nav">
<a href="https://klia2.co" class="active">Home</a>
<a href="../facilities/index.htm">Facilities</a>
<a href="../airlines/index.htm">Airlines Offices</a>
<form class="search-box">
<input type="text" placeholder="Search..">
<button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
</form>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>