Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the screen width is above 1100px. However, it should appear in the dropdown menu when the screen width is below 1100px. Upon inspecting the element in Chrome, there's a green line indicating that the item still occupies space even when hidden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu</title>
<link href="styles.css" rel="stylesheet">
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a58554253595554497a08140b140e">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="header">
<div class="toggle-button" onclick="myFunction();">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
<div class="logo">
<a href="index.html"><img src="darklogo.png" alt=""></a>
</div>
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="bookatabledd">Book A Table</a></li>
</ul>
</nav>
<div class="bookatable">Book A Table   ></div>
</header>
<script src="main.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
header {
display: flex;
text-align: center;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 5px 60px;
background-color: #212223;
position: relative;
}
.logo img {
width: 190px;
}
.bookatabledd {
display: none;
}
nav ul li {
display: inline-block;
padding: 5px 25px;
}
nav ul li a{
display: inline-block;
font-weight: bold;
font-size: 20px;
list-style-type: none;
}
nav ul li a:hover {
color: rgb(174, 17, 174);
}
nav ul li a{
text-decoration: none;
display: inline-block;
color: white;
font-weight: 600;
}
.toggle-button{
width: 35px;
position: absolute;
right: 40px;
top: 45px;
display: none;
cursor: pointer;
}
.toggle-button span {
display: inline-block;
width: 100%;
height: 2px;
background-color: white;
float: left;
margin-bottom: 8px;
}
.bookatable {
color: #fff;
background-color: #555556;
border-radius: 6px;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
line-height: 1;
text-align: center;
padding: 9px 6px 8px 8px;
transition-duration: 0.6s;
transition-timing-function: ease-in-out;
letter-spacing: -.3px;
cursor: pointer;
}
.bookatable:hover {
cursor: pointer;
background-color: #909092;
color: white;
}
/* ---- BREAKPOINTS ---- */
@media (max-width: 1100px) {
header {
display: flex;
flex-direction: column;
text-align: center;
position: relative;
justify-content: space-between;
padding: 5px 20px 5px;
}
.logo {
align-self: flex-start;
}
.toggle-button{
display: block;
}
nav{
display: none;
width: 100%;
border-top: 1px solid white;
padding-top: 20px 0;
margin-top: 30px;
}
nav ul li{
padding: 15px 0px;
width: 100%;
}
nav ul {
text-align: center;
}
nav.show{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.bookatable {
display: none;
}
.bookatabledd {
display: block;
}
}