How can I put my logo to right side of the navbar?-CodePudding

My header should be fixed on the page so i couldn't use float:right;. I'm 0 newbie around here. Logo should be on right side of the navbar and also responsive. I tried margin, float and other flex properties. I'm just going to be mad. Where is the mistake.

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  background-color: #efefef;
}

.wrapper {
  position: relative;
}

.header-logo {
  width: 20vw;
  height: 20vw;
}

header {
  width: 100%;
  height: 4rem;
  background: #609F92;
  position: fixed;
  display: flex;
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
}

#header-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 1px 1px 2px 1px;
}

#nav-bar {
  display: flex;
  flex-direction: row;
}

#nav-bar ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

#nav-bar li {
  margin: 10px;
}

<div >
  <header id="header">
    <nav id="nav-bar">
      <ul>
        <li>Features</li>
        <li>About Us</li>
        <li>Contact</li>
      </ul>
      <div >
        <img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943,943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
      </div>
    </nav>
  </header>
</div>

CodePudding user response：

The issue is mainly caused because you nesting so many flexboxes within each other. As such the elements will not span the entire available width automatically.

Give the nav tag a width of 100% to fill out the entire containers width: #nav-bar { width: 100% }
to align the logo to the right within a flexbox use margin-left: auto: .header-logo { margin-left: auto; }

Also you could improve your code by removing the ID from the nav element and target the nav element directly. As semantically you should only have one nav element it would be unecessary to asign an id to it. Same rule also counts for the header element.
Then you could remove display: flex; from the header which has only one child element in the first place and as such is useless. IMHO it would be smarter though to close the nav with the ul as the logog is semantically not part of the navbar.
Last but not least you could remove flex-direction: row as it is the default value anyways.

#nav-bar {
  width: 100%;
}

.header-logo {
  margin-left: auto;
}


/* original CSS */

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  background-color: #efefef;
}

.wrapper {
  position: relative;
}

.header-logo {
  width: 20vw;
  height: 20vw;
}

header {
  width: 100%;
  height: 4rem;
  background: #609F92;
  position: fixed;
  display: flex;
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
}

#header-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 1px 1px 2px 1px;
}

#nav-bar {
  display: flex;
  flex-direction: row;
}

#nav-bar ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

#nav-bar li {
  margin: 10px;
}

<div >
  <header id="header">
    <nav id="nav-bar">
      <ul>
        <li>Features</li>
        <li>About Us</li>
        <li>Contact</li>
      </ul>
      <div >
        <img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943,943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
      </div>
    </nav>
  </header>
</div>

I also created a Codepen for you where I corrected the code to be semantically correct and to shroten it to the necessary lines: Codepen

CodePudding user response：

Have you tried doing:

body {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  background-color: #efefef;
}

.wrapper {
  position: relative;
}

header {
  width: 100%;
  height: 4rem;
  background: #609F92;
  position: fixed;
  display: flex;
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
  justify-content: space-between;
}

.header-logo {
  width: 20vw;
  height: 20vw;
}

#header-img {
  width: 10%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 1px 1px 2px 1px;
}

#nav-bar {
  display: flex;
  flex-direction: row;
}

#nav-bar ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
}

#nav-bar li {
  margin: 10px;
}

<div >
  <header id="header">
    <nav id="nav-bar">
      <ul>
        <li>Features</li>
        <li>About Us</li>
        <li>Contact</li>
      </ul>
    </nav>
    <img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943,943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
  </header>
</div>