I recently designed a DropDown navigation menu using CSS. However, I noticed that when I click on it, the page contents disappear entirely. I would like to modify this behavior so that instead of hiding the content, the dropdown menu either pushes the page content down or appears in front of the content.
<script type="text/javascript>
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
</script>body{
/*font-family:Calibri !important;*/
font-family:ProximaNova,Arial,Sans-serif;
margin: 0 2px;
padding: 0;
text-decoration: none;
font-size:12px;
/*max-width: 100%;*/
overflow-x: hidden;
}
header{
height: 45px;
background: #008269;
margin-bottom:2px;
}
.inner-width{
max-width: 100%;
/*padding: 0 10px;*/
margin: auto;
}
.navigation-menu{
float: left;
display: flex;
align-items: center;
min-height: 45px;
}
.navigation-menu a{
/*margin-left: 10px;*/
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 1% 10%;
border-radius: 4px;
transition: .3s linear;
font-weight:700;
text-decoration: none;
}
.navigation-menu a:hover{
background: #fff;
color: #2f3640;
transform: scale(1.1);
text-decoration: none;
}
.navigation-menu i{
margin-right: 8px;
font-size: 16px;
}
.menu-toggle-btn{
float: right;
height: 20px;
line-height: 20px !important;
color: #fff;
font-size: 26px;
display: none !important;
cursor: pointer;
}
@media screen and (max-width:1500px) {
.menu-toggle-btn{
display: block !important;
margin-top:13px;
margin-right:13px;
}
.navigation-menu{
position:center;
width: 100%;
height:100%;
/*max-width: 100%;*/
background:#008269;
top: 45px;
right: 0;
display: none;
/*padding: 20px 40px;*/
box-sizing: border-box;
}
.navigation-menu::before{
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #172b4d;
position: absolute;
top: -10px;
right: 10px;
}
.navigation-menu a{
display: block;
margin: 10px 0;
}
.navigation-menu.active{
display: block;
}
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<meta http-equiv="X-UA-Compatible" content="ie=edge>
<title>Responsive Drop-down Navigation</title>
<link href="css/MasterPage-CSS.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css>
<script src="http://code.jquery.com/jquery-3.3.1.js></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet>
<asp:ContentPlaceHolder id="head" runat="server>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server>
<header>
<div class="inner-width">
<i class="menu-toggle-btn fas fa-bars"></i>
<nav class="navigation-menu">
<a href="#">Products</a>
<a href="#">Customers</a>
<a href="#">Sales</a>
<a href="#">Installments</a>
<a href="#">Financial</a>
<a href="#">Stock</a>
<a href="#">payroll</a>
<a href="#">Expensis</a>
</nav>
</div>
</header>
<asp:ContentPlaceHolder id="contentBody" runat="server>
<div style="overflow-x:auto;"></div>
</asp:ContentPlaceHolder>
</form>
<script type="text/javascript>
$(".menu-toggle-btn").click(function () {
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
</script>
</body>
</html>