Align logo in left with link on the right navbar-CodePudding

I wanna to put a logo in the left of the navigation. The links are set to justify-content: flex-end;

I tried to make a div element and make it important with !important property.

.navbar {
  background-color: #242931;
  top: 0%;
  text-align: center;
  justify-content: flex-end;
  display: flex;
}

.left-nav {
  justify-content: flex-start !important;
  display: flex !important;
}

.navbar a {
  color: #b7c2d0;
  font-family: cubano;
  font-size: 1.15rem;
  text-decoration: none;
  margin-right: 15px;
  margin-left: 15px;
  padding: 24px;
}

.navbar a:hover {
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, #ff6e00, #ff9400, #ffb900, #f8dc00, #e9ff00);
  background-clip: text;
  color: transparent;
}

<div >
  <div >
    <a href="">example</a>
  </div>
  <a href="Others HTML pages/Guides.html" target="_blank">Guides</a>
  <a href="#" target="_blank">Clips</a>
  <a href="#" target="_blank">Leaderborard</a>
  <a href="Others HTML pages/Support the server.html" target="_blank">Support the server</a>
  <a href="Others HTML pages/Help.html" target="_blank">Help</a>
  <a href="Others HTML pages/Rules.html" target="_blank">Rules</a>
</div>

CodePudding user response：

You don't need any div
simply assign margin-right: auto to the first a (logo)

.navbar {
  display: flex;
  gap: 2em;
}
.navbar a:first-child {
  margin-right: auto;
}

<div >
  <a href="#!">LOGO</a>
  <a href="#!">two</a>
  <a href="#!">three</a>
</div>

If you want to separate those two groups, wrap the actual navigation into a <nav> tag (and for better SEO), and use instead a margin-left: auto on it. The principle is the same:

.navbar {
  display: flex;
}

.navbar nav {
  display: flex;
  gap: 2em;
  margin-left: auto;
}

<div >
  <a href="#!">LOGO</a>
  <nav>
    <a href="#!">two</a>
    <a href="#!">three</a>
  </nav>
</div>

CodePudding user response：

Nest the right-nav in a div also. Then you can use justify-content: space-between; which will space out the two divs. Then you can add align-items: center; to make them align.

.navbar {
  background-color: #242931;
  top: 0%;
  text-align: center;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.left-nav {
  justify-content: flex-start !important;
  display: flex !important;
}

.navbar a {
  color: #b7c2d0;
  font-family: cubano;
  font-size: 1.15rem;
  text-decoration: none;
  margin-right: 15px;
  margin-left: 15px;
  padding: 24px;
}

.navbar a:hover {
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, #ff6e00, #ff9400, #ffb900, #f8dc00, #e9ff00);
  background-clip: text;
  color: transparent;
}

<div >
  <div >
    <a href="">example</a>
  </div>
  <div >
    <a href="Others HTML pages/Guides.html" target="_blank">Guides</a>
    <a href="#" target="_blank">Clips</a>
    <a href="#" target="_blank">Leaderborard</a>
    <a href="Others HTML pages/Support the server.html" target="_blank">Support the server</a>
    <a href="Others HTML pages/Help.html" target="_blank">Help</a>
    <a href="Others HTML pages/Rules.html" target="_blank">Rules</a>
  </div>
</div>