I am having a problem with the CSS of the navbar of a Website. Please help me move the items to the right side and deal with responsiveness.
HTML:
<nav>
<a href="#" class="logo"><img src="./images/logo.png" height="120" width="120"></a>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">How to MUN</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
body, html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
nav {
position: absolute;
display: flex;
align-items: center;
padding: 30px 90px;
z-index: 99;
}
nav .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
}
nav ul li {
list-style: none;
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
padding: 6px 15px;
color: #ffff;
border-radius: 20px;
}
nav ul li a:hover,
.active {
background: #fff;
color: #2b1055;
}
I have tried many times but I am not able to fix the problem. The items always stick together.
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
nav {
position: relative;
background: rgb(31, 30, 30);
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 90px;
z-index: 99;
}
nav .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
}
nav ul li {
list-style: none;
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
white-space: nowrap;
}
nav ul li a:hover, .active {
background: #fff;
color: #2b1055;
}
/* breakpoint for mobile */
@media screen and (max-width: 768px) {
nav {
flex-direction: column;
padding: 20px 0px;
}
}
if you want more advance responsive menu, you can hide the nav menu and add hamburger button then use css :focus to expand nav menu when click on hamburger button or use some javascript/jquery code
Try this
I have added a media query for a responsive view. When the resolution goes below 768px, the navbar changes to column view
body, html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
nav {
display: flex;
align-items: center;
padding: 12px 90px;
z-index: 99;
background-color:#7c7c7c;
}
nav .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
}
nav ul {
display: flex;
justify-content: right;
align-items: center;
width:100%;
}
nav ul li {
list-style: none;
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
padding: 6px 15px;
color: #ffff;
border-radius: 20px;
}
nav ul li a:hover,
.active {
background: #fff;
color: #2b1055;
}
@media only screen and (max-width: 767px){
nav {
flex-direction: column;
}
nav ul {
flex-direction: column;
padding:0px;
margin-bottom:0px;
}
nav ul li{
margin-left:0px;
margin-bottom:5px;
}
}<nav>
<a href="#" class="logo"><img src="https://images.unsplash.com/photo-1557053964-937650b63311?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=997&q=80" width="80"></a>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">How to MUN</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>First of all, you need to make the position relative.
secondly;