So I got a navbar, and whilst working on mobile responsiveness when I open the mobile menu, the logo moves down with the list towards the center. How can I prevent this, I want the logo to remain in its original place and not move when I open up the list??? It also moves to the left which I'm also not sure what to do about because I set the property to justify-content: space-around;.
function mobileNav() {
let navlinks = document.getElementById('myLinks');
let section1 = document.getElementById("section1");
if (navlinks.style.display == 'none') {
navlinks.style.display = 'block';
section1.style.height = '70vh';
} else {
section1.style.height = '50vh'
navlinks.style.display = 'none';
}
}.navbar {
/* max-width: 100%; */
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
padding-top: 50px;
z-index: 5;
}
.logo {
font-size: 3rem;
font-weight: bold;
color: white;
}
.nav-options i {
color: white;
display: none;
}
@media only screen and (max-width: 767px) {
.nav-options i {
display: block;
font-size: 3rem;
text-align: right;
padding: 0px;
}
#myLinks {
display: none;
padding: 0px;
}
.nav-options #myLinks a {
display: block;
text-align: right;
padding: 5px 0px;
}
}
/* ADDED otherwise it is white on white */
body{
background:salmon;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="navbar">
<label class="logo" id="logo">COINGAIN</label>
<div class="nav-options">
<i class="fa fa-bars" onclick="mobileNav()" id="hamburger"></i>
<div id="myLinks">
<a href="coingain.html">Home</a>
<a href="aboutcoingain.html">About</a>
<a href="#">App</a>
<a href="coingainfeatures.html">Features</a>
<button class="start" id="">Get Started</button>
</div>
</div>
</div>To fix this, you need to position the #myLinks div absolutely so that it does not affect the flow of the other items in the flexbox (and the page). For this to work, you also need to position its parent the .nav-options div relatively, like so:
Position the .nav-options div relatively.
.nav-options {
position: relative;
}
Then position the #myLinks div (the dropdown div) absolutely within its parent div .nav-options and give it a right positioning of 0px (or 0rem or just 0).
#myLinks {
...
position: absolute;
right: 0px;
...
}