How to move nav bar to the left of viewport

HTML-CSS
1 
body>
	<header id="header">
	<div class="container"></div>
	<nav id="nav-bar">
		 <img src="https://www.logolynx.com/images/logolynx/fc/fc0b437ce037f257e4fff275a0a1025e.png" id="header-img">

		 <ul>
		 <li><a  class=" nav-link"href="#home" class="active">
		 Home</a></li>
		 <li><a  class="nav-link"href="#learn-more">Learn More</a></li>
		 <li><a  class=" nav-link"href="#discount-coupon">Discount Coupon</a></li>
		  </ul>
		</nav>
	</header>
</div>

I’m try to put my navbar to the left of the logo while its using (the navbar) display flex currently it’s to the right of the logo.

body{
     background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);
       background-size: cover;
     background-repeat: no-repeat;

     }
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 10px;
  font-family: sans-serif;
}

a{
  text-decoration: none;
  color: #eee;
}

header{
  width: 100%;
  height: 100vh;
  background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);


  
}
.container{
  max-width: 120rem;
  width: 90%;
  margin: 0 auto;
}
nav{
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.6rem;
  background-image: url(https://www.wallpapertip.com/wmimgs/219-2193017_dark-sky-background-png.png);
  width: 100%;
  top: 0;
  position: absolute;
}

img{
  width: 20%;
  margin-left: 550px;
}
nav ul{
  display: flex;
}
nav ul li{
  list-style: none;
}
nav ul li a{
  padding: 1rem 0;
  margin: 0 3rem;
  position: relative;
  letter-spacing: 2px;

}
2

I think the most straightforward way would be to put the <ul> before the <img> in your HTML.

3

Assuming by logo, you are referring to the image in the navbar, then you can go with @jsdisco’s suggestion above. If for some reason you don’t want to alter the order of your HTML elements, you can also apply flex-direction: row-reverse on the flex container.

4

@nibble row-reverse worked until i tried center the logo and the nav inputs became distorted/out of place.

5

@nibble Never mind I figured that out but I tried to raise my nav bar because there’s a little of dead space but top equal to zero didn’t work any suggestions.

6

It would be easier to help if you hosted your project on codesandbox, codepen, stackblitz or an online code editor. Right now I can only assume what you are trying to do. Are you sure that space is not due to padding-top: 5rem?

I have noticed you are applying position absolute to the nav element. That only works with respect to the nearest positioned ancestor. If it is not due to the padding, Try applying position: relative on the container and then:

position: absolute;
top: 0;
left: 0;

on the nav element.

1 Like
7

remove the padding-top to omit the extra space above.