Html - How to move navbar items so some list items are on the left and some items are on the right

feyaif3
August 31, 2023
282 views
0 votes
2 Answers

I’ve created a navbar with a logo and a few list items that link to different pages. I want the navbar to have the logo on the left followed by 4 list items, then the middle will be blank. On the right side of the navbar I want to the remaining list items.

My HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- CSS Style -->
    <link rel="stylesheet" href="/css/style.css" />
  </head>
  <body>
    <header>
      <img class="logo" src="/img/logo.png" alt="PSR Logo" width="80" /><a
        href="index.html"
      ></a>
      <nav class="navbar">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="games.html">Games</a></li>
          <li><a href="console.html">Console</a></li>
          <li><a href="reviews.html">Reviews</a></li>
        </ul>
      </nav>
      <nav class="right-nav">
        <ul>
          <li><a href="login.html">Login</a></li>
          <li><a href="signup.html">Join</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

My CSS:

@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #0f182a;
}

header {
  background-color: #000000;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.logo {
  cursor: pointer;
  width: 80px;
  background-color: #000000;
}

.navbar a,
li,
ul {
  font-family: "Inconsolata", monospace;
  text-decoration: none;
  background-color: #000000;
  color: white;
  margin: 0 10px;
  list-style: none;
  display: flex;
  justify-content: center;
  background-color: #000000;
  position: static;
  top: 0px;
  left: 70px;
}

.right-nav a,
li,
ul {
  font-family: "Inconsolata", monospace;
  text-decoration: none;
  background-color: #000000;
  color: white;
  margin: 0 10px;
  list-style: none;
  display: flex;
  justify-content: center;
  background-color: #000000;
  position: static;
  top: 0px;
  left: 9cm;
}

This is what it looks like currently:
Picture of what the navbar looks like with me code above

Tags: css html

Answers

It might be a little different to what you are asking, but how about something like this? I made the navbar the same width of the page by using width: 100vw. Then added float:left to the navbar. Now the links you wanted on the right side, are on the right side.

@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #0f182a;
}

header {
  background-color: #000000;
  display: flex;
  align-items: center;
  padding: 5px 10px;
}

.logo {
  cursor: pointer;
  width: 80px;
  background-color: #000000;
}

.navbar {
  width: 100vw;
  background: #000000;
}

.left-nav {
  float: left;
}

.right-nav {
  float: right;
}

.left-nav a,
li,
ul {
  font-family: "Inconsolata", monospace;
  text-decoration: none;
  background-color: #000000;
  color: white;
  margin: 0 10px;
  list-style: none;
  position: static;
}

.right-nav a,
li,
ul {
  font-family: "Inconsolata", monospace;
  text-decoration: none;
  background-color: #000000;
  color: white;
  margin: 0 10px;
  list-style: none;
  position: static;
  float: right;
}

<head>
  <!-- CSS Style -->
  <link rel="stylesheet" href="/css/style.css" />
</head>

<body>
  <header>
    <img class="logo" src="/img/logo.png" alt="PSR Logo" width="80" />
    <a href="index.html"></a>
    <nav class="navbar">
      <ul class="left-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="console.html">Console</a></li>
        <li><a href="reviews.html">Reviews</a></li>
      </ul>
      <ul class="right-nav">
        <li><a href="login.html">Login</a></li>
        <li><a href="signup.html">Join</a></li>
      </ul>
    </nav>
  </header>

I also tried cleaning up your code a bit to get the same result. You can see the code here https://jsfiddle.net/cmt10vL6/

I would suggest a slight restructuring of your HTML.

Make the logo clickable by putting it within the anchor element.

Make just one navbar – it doesn’t matter to screen readers where the info is placed visually, it’s just one navbar.

Use a combination of grid and flex to get items spaced out and inline as you want them

So, to start with header is a grid with two columns, the logo a element and the nav. The first column width is determined by the width of the logo and the nav takes up the rest of the viewport width.

Within the nav are two lists. They are both display flex with a gap between each of their children. The nav is displayed flex and with space-between which puts the first list to the left and the second to the right.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- CSS Style -->
  <link rel="stylesheet" href="/css/style.css" />
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&display=swap");
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      background-color: #0f182a;
    }
    
    header {
      background-color: #000000;
      display: grid;
      grid-template-columns: auto 1fr;
      padding: 5px 10px;
      width: 100vw;
    }
    
    .logo {
      cursor: pointer;
      width: 80px;
      background-color: #000000;
    }
    
    .navbar {
      font-family: "Inconsolata", monospace;
      text-decoration: none;
      background-color: #000000;
      margin: 0 10px;
      display: flex;
      justify-content: space-between;
      background-color: #000000;
      top: 0px;
      left: 70px;
      width: calc(100vw - 70px);
    }
    
    .navbar ul {
      display: flex;
      list-style: none;
      gap: 10px;
    }
    
    header a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <header>
    <a href="index.html"><img class="logo" src="/img/logo.png" alt="PSR Logo" width="80" /></a>
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="console.html">Console</a></li>
        <li><a href="reviews.html">Reviews</a></li>
      </ul>
      <ul>
        <li><a href="login.html">Login</a></li>
        <li><a href="signup.html">Join</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to move navbar items so some list items are on the left and some items are on the right

Answers