I have modified the code overall as per my understanding of the requirement.
Please visit: https://codepen.io/emmeiWhite/pen/MWjXqpQ
Some major changes : ( The commented stuff is what we no longer require)
nav {
/* position: absolute; */
/* margin: 1.5em 30em; */
display: flex;
justify-content: center;
/* width: 45%; */
height: 50px;
border: 3px dotted red;
/* z-index: 999; */
position:fixed;
top:0;
left:0;
right:0;
}
I made this navigation but have several problems.
nav {
position: absolute;
margin: 1.5em 30em;
display: flex;
justify-content: space-between;
width: 45%;
height: 10vh;
/* border: 3px dotted red; */
z-index: 999;
}
.navContainer {
position: relative;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #d6d6d6;
border-radius: 10px;
opacity: 0.8;
/* border: 3px dotted green; */
}
.navContainer a {
color: #1b1b1b;
}
.logoContaienr img {
width: 150px;
height: auto;
}
.anmeldungsContainer {
position: relative;
top: 25px;
height: 50px;
color: #d6d6d6;
border-radius: 10px;
background-color: #034078;
margin-left: 20px;
/* border: 3px dotted blue; */
}
.anmeldungsContainer li {
padding-top: 0.5em;
}
.anmeldungsContainer a {
color: #d6d6d6;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
}
nav li {
margin: 0 2em;
text-decoration: none;
}
a {
display: block;
text-decoration: none;
font-size: 1.5em;
font-weight: bolder;
transition: 0.3s;
}<nav>
<div class="navContainer">
<div class="linksMenuContainer">
<ul>
<li><a href="#">Kurse</a></li>
<li><a href="#">Ernährung</a></li>
</ul>
</div>
<div class="logoContaienr">
<img src="../Img/Logo.png" alt="">
</div>
<div class="rechtsMenuContainer">
<ul>
<li><a href="#">Abos</a></li>
<li><a href="#">Trainer</a></li>
</ul>
</div>
</div>
<div class="anmeldungsContainer">
<ul>
<li><a href="#">Anmeldung</a></li>
</ul>
</div>
</nav>Why do you have two elements with flexbox applied?
Dear @Sasan… There are a lots of issues with the code when it comes to using good CSS… Let me modify it a bit as per my understanding of what you want to achieve 🙂
Dear @ImranRafiqRather. that is very kind of you. Thanks alot
Please check this one : I just made some modification :
If there is anything else you require, just let me know 🙂 And if it works I will answer it accordingly 🙂
first of all, thank you very much. How can navigation and login button be side by side and also everything stay in the middle
Hmm, I got it… I will update on the main code 🙂
Please have a look. Is this what is required
Thank you @Imran Rafiq Rather
Best way would be to use a Hamburger menu and logo on navbar. And once the handburger icon is clicked show the other links 🙂