skip to Main Content

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


  1. 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):

    @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;
    }
    
    .center-menu {
      display: flex;
      align-items: center;
    }
    
    .menu {
      display: flex;
    }
    
    .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;
    }
    
    .login-register {
      display: flex;
      align-items: center;
    }
    
    .login-register li {
      padding: 0 10px;
    }
    
    #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">
    <header>
      <nav>
        <ul class="nav-bar">
          <li class="logo">
            <a href="#"><img src="youreview_logo.png" alt="logo"></a>
          </li>
          <div class="center-menu">
            <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>
          </div>
          <div class="login-register">
            <li><a href="#">Login</a></li>
            <li><a href="#">Register</a></li>
          </div>
        </ul>
      </nav>
    </header>
    Login or Signup to reply.
  2. 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:

    <!-- Navbar code -->
    <div class="logo-spacing">
        <!-- your logo -->
    </div>
    <div class="pages-spacing">
        <!-- your page links -->
    </div>
    <div class="login-spacing">
        <!-- your login/register links -->
    </div>
    <!-- navbar closing code -->
    

    css:

    .logo-spacing {
        width: 33%
    }
    
    .pages-spacing {
        width: 33%
    }
    
    .login-spacing {
        width: 33%
    }
    

    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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search