I’m making a review website, and I followed a tutorial on a navbar. The navbar is responsive. However, I need to add and edit a few of its elements, but I cannot figure out how to. I want to split my nav bar into 3 elements, my logo on my left, my websites pages / items in the centre, and login and register on the right. I have included all my html and css below
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
color: white;
}
body {
font-family: "Poppins", sans-serif;
--colour1: #fff;
--colour2: #1b2735;
}
.nav-bar {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
list-style: none;
position: relative;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
padding: 12px 20px;
z-index: 1;
}
.logo img {
width: 60px;
}
.menu {
display: flex;
float: right;
}
.menu li {
padding: 30px;
}
.menu li a {
display: inline-block;
text-decoration: none;
color: white;
text-align: center;
transition: 0.15s ease-in-out;
position: relative;
text-transform: uppercase;
}
.menu li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 1px;
background-color: white;
transition: 0.15s ease-in-out;
}
.menu li a:hover:after {
width: 100%;
}
.open-menu {
position: absolute;
columns: white;
cursor: pointer;
font-size: 1.5rem;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: none;
}
.close-menu {
position: absolute;
columns: white;
cursor: pointer;
font-size: 1.5rem;
top: 20px;
right: 20px;
display: none;
}
#check {
display: none;
}
@media(max-width: 610px) {
.menu {
flex-direction: column;
align-items: center;
justify-content: center;
width: 80%;
height: 100vh;
position: fixed;
top: 0;
right: -100%;
z-index: 100;
background-color: var(--colour2);
transition: all 0.2s ease-in-out;
}
.menu li {
margin-top: 40px;
}
.menu li a {
padding: 10px;
}
.open-menu,
.close-menu {
display: block;
}
#check:checked~.menu {
right: 0;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<header>
<nav>
<ul class="nav-bar">
<li class="logo">
<a href="#"><img src="youreview_logo.png" alt="logo"></a>
</li>
<input type="checkbox" id="check">
<span class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<label for="check" class="close-menu"><i class="fas fa-times"></i></label>
</span>
<label for="check" class="open-menu"><i class="fas fa-bars"></i></label>
</ul>
</nav>
</header>
2
Answers
Dont worry, welcome! Here’s an updated version of your code to get the layout you described:
HTML ( I’ve added a div with the class login-register to contain the login and register links):
What you could do is separate your logo, navbar links and login and register in different divs, and use the width element in your css to give them equal spacing. A bit like this:
html:
css:
Haven’t tested it, but this hopefully helps.
A different approach would be to use bootstrap 5 grid, this link has more info on it: https://getbootstrap.com/docs/5.2/layout/grid/#grid-options