How to separate elements within a navBar css-CodePudding

I'm trying to build a blog web page in a HTML CSS tutorial and I can't find a way to make the navBar identical. Here's the Navigation Bar:

I don't know how to separate the logo on the left to the group of icons on the right. I tried to use Flex but I can't figure out how to use it properly.

header img {
  height: 40px;
  margin-left: 40px;
}

header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
}

body {
  background-color: aliceblue;
}

header * {
  display: inline;
}

header li {
  justify-content: center;
  margin: 20px;
}

header li a {
  color: black;
  text-decoration: none;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">

<header>
  <img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="">
  <nav>
    <ul>
      <li><a href=""><i class="material-icons">search</i></a></li>
      <li><a href=""><i class="material-icons">list</i></a></li>
      <li><a href=""><i class="material-icons">notifications</i></a></li>
      <li><a href=""><button>Upgrade</button></a></li>
      <li>
        <a href="">
          <div id="circle"></div>
        </a>
      </li>
    </ul>
  </nav>
</header>

If you have any advice or suggestions it would be great I'm starting and this is making me struggle a lot. Thanks in advance guys!

CodePudding user response：

You just have to use display: flex; align-items: center; with header style which will look like

header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
}

and also need to add CSS in Nav style, which will look like

header nav{
  margin-left: auto;
  display: flex;
  align-items: center;
}

Complete code

header img{
height: 40px;
margin-left: 40px;
}
header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
}
header nav{
  margin-left: auto;
  display: flex;
    align-items: center;
}

body{
background-color: aliceblue;
}
header * {
display: inline;
}
header li{
justify-content: center;
margin: 20px;
}
header li a {
 color: black;
text-decoration: none;

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My blog</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
</head>
<body>
<header>
  <img src="https://assets.hongkiat.com/uploads/psd-text-svg/logo-example.jpg" alt="">
  <nav>
    <ul>
      <li><a href=""><i class="material-icons">search</i></a></li>
      <li><a href=""><i class="material-icons">list</i></a></li>
      <li><a href=""><i class="material-icons">notifications</i></a></li>
      <li><a href=""><button>Upgrade</button></a></li>
      <li><a href=""><div id="circle"></div></a></li>
    </ul>
  </nav>
</header>

</body>
</html>

CodePudding user response：

You can use display: flex on the header (vertical alignment via align-items as desired), and to move the logo and the navigation to the left and right, just add margin-left: auto to nav to move it as far right as its contents allow.

(margin-right: auto for the logo would accomplish the same result, BTW)

header img {
  height: 40px;
  margin-left: 40px;
}

header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
}

body {
  background-color: aliceblue;
}

header * {
  display: inline;
}

header li {
  justify-content: center;
  margin: 20px;
}

header li a {
  color: black;
  text-decoration: none;
}

nav {
  margin-left: auto;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">

<header>
  <img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
  <nav>
    <ul>
      <li><a href=""><i class="material-icons">search</i></a></li>
      <li><a href=""><i class="material-icons">list</i></a></li>
      <li><a href=""><i class="material-icons">notifications</i></a></li>
      <li><a href=""><button>Upgrade</button></a></li>
      <li>
        <a href="">
          <div id="circle"></div>
        </a>
      </li>
    </ul>
  </nav>
</header>

CodePudding user response：

You can do it with Flex, give your main div the display: flex and justify-content: space-between so there will be a space between your logo and other nav-items and then align-items: center so every item will be in the same horizontally aligned.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">

<header>
  <img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
  <nav>
    <ul>
      <li><a href=""><i class="material-icons">search</i></a></li>
      <li><a href=""><i class="material-icons">list</i></a></li>
      <li><a href=""><i class="material-icons">notifications</i></a></li>
      <li><a href=""><button>Upgrade</button></a></li>
      <li>
        <a href="">
          <div id="circle"></div>
        </a>
      </li>
    </ul>
  </nav>
</header>

Css

header img {
  height: 40px;
  margin-left: 40px;
}

header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center
}

body {
  background-color: aliceblue;
}

header * {
  display: inline;
}

header li {
  justify-content: center;
  margin: 20px;
}

header li a {
  color: black;
  text-decoration: none;
}