Looking for a solution to create a navbar with two distinct sections for contact info and the menu. The goal is to have the contact info disappear when scrolling down, while the menu remains fixed at the top of the page. When scrolling back up, the menu should be pushed down by the contact info. Any assistance would be greatly appreciated.
body {
margin: 0;
padding: 0;
}
#navbar {
width: 100%;
/* position: fixed; */
}
/*NAVBAR-CONTACT*/
.navbar-contact {
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(242, 122, 61, 1);
width: 100%;
list-style-type: none;
}
.navbar-contact li {
padding: 10px 16px;
float: right;
}
.navbar-contact li:first-child {
padding-right: 25%;
}
.navbar-contact li a {
display: block;
color: rgba(255, 255, 255, 1);
text-align: center;
text-decoration: none;
font-family: Verdana, Tahoma, sans-serif;
font-size: 12px;
}
.navbar-contact li a:hover {
text-decoration: underline;
}
/*NAVBAR-MENU*/
.navbar-menu {
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.8);
list-style-type: none;
text-align: center;
position: fixed;
width: 100%;
}
.navbar-menu li {
display: inline-block;
}
.navbar-menu li a {
display: block;
color: rgb(190, 190, 190);
text-align: center;
text-decoration: none;
font-family: Verdana, Tahoma, sans-serif;
font-weight: 900;
font-size: 16px;
padding: 20px 16px;
}
.navbar-menu li a:hover {
color: rgba(255, 255, 255, 1);
text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}
#content {
margin: 0;
padding: 80px 60px 0 60px;
height: 300vh;
}<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<ul class="navbar-contact">
<li><a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="620b0c040d22060d0d0f030b0c4c010d4c1709">[email protected]</a></a></li>
<li><a href="#">(XXX) XXXX XXXX</a></li>
</ul>
<ul class="navbar-menu">
<li><a href="#">About</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Clients</a></li>
</ul>
</nav>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</body>
</html>