How to get nav-bar ul list text on right side of logo

HTML-CSS
1

Aer%20Backpack
Aer%20Backpack1877×1061 196 KB

I am trying to to align my id= “nav-bar” text to the right of the header by way of float:right. The logo on the left has been on float:left and absolute positioning along the header parent element. neither of these have worked. I’ve tried using clearfix for the “id=nav-bar” but it doesn’t work. Any idea how I could solve this problem? Please help. Please see code below.

html,body{ font-family: 'Open Sans',sans-serif; text-align: center; } *{ margin: 0; padding: 0; box-sizing: border-box; } #page-wrapper { position: relative; } #header { position: fixed; top: 0; left: 0; height: 125px; } .logo { float: left; } #header-img { height:100%; } nav { position: relative; float: right; height: 10vh; color:blue; } li { display: inline-block; list-style: none; } a { color: #000; text-decoration: none; } 
      <nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#features">Features</a></li>
          <li><a class="nav-link" href="#products">Products</a></li>
          <li><a class="nav-link" href="#about us">About Us</a></li>
        </ul>
      </nav>
 </header>
  
    
    
    <div class="container">
      <section id="features">
        <div class="grid"></div>
          <img class="lock feature" src="file:///F:/Coding/Product%20Landing%20Page/lock%20feature.svg" alt ="features"></img>
          <div class="description"><h2>Lock Feature<h2><p>Aer started in 2014 as a crowdfunding project that combined a gym bag and an office bag into one simplified design. That project has grown into a mission to simplify the way you carry so you can worry less about what's on your back and focus more on what's ahead. Whether you're traveling between the office and the gym, or from San Francisco to Tokyo, there's a bag in our collection that's perfectly suited for your journey.</p></div>
            
     
         <div class="icon-bag"></div>
          <img class="zip feature" src="file:///F:/Coding/Product%20Landing%20Page/zip%20feature.svg" alt="full bag"></img>
          <div class="description"><h2>Zip Feature</h2><p>The Active Collection is a line of modern gym/work bags designed for the city professional. Go from the office to the gym and everywhere in between.</p></div>
          
    
          <div class="grid"></div>
            <img class="lap top feature" src="file:///F:/Coding/Product%20Landing%20Page/lap%20top%20feature.svg" alt="about us"></img>
            <div class="description"><h2>Lap Top Feature</h2><p>Inspired by the city, we create minimalist bags that balance smart features with a clean, architectural style.</p></div>
      </section>      
    </div>

        
            
            
   
      
    
    
    
    <div class="container">
      <section id="products"></section>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/qeFOYlHmyGE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    
    
    <div class="container">
      <section id="about us"></section>
    </div>
    
</div>
2

It looks like some of your code did not copy over to the post properly. I’m not seeing the html element with the logo class. I’m assuming that this is why there is a black logo between the unformatted css and the formatted html.

By chance are you working in codepen? Could you share a link to a pen?

Someone could probably suggest a solution if they could just see that bit of code.

3

Here’s the CodePen link.

See the Pen Product Landing Page by edward holmes (@holmedw) on CodePen.

If that doesn’t work, try this:

4

What you originally proposed should work.

#header {
  position: fixed;
  top: 0;  /* probably don't need */
  left: 0;   /* probably don't need */
  height: 125px;
  width: 100%;  /* full screen */
  background:grey; /*just to show where it is covering for now*/
}

.logo {
  float: left;
  height:100%; /* keep it size of fixed navigation bar */
}
#nav-bar {
  float: right;
}

I personally probably would have resorted to flexbox instead of floats in this situation but that should not necessarily dissuade you from using floats.

5

It was the width and grey background that did it. So foolish of me.