在导航栏中使用HTML flex / CSS在左侧显示徽标，向右显示菜单

Question

I'm trying to code a responsive horizontal nav bar using flex-display (see attached pic for final project), but I can't get the vector logo sized down and to the left. Here's my code:

HTML:

<nav>
    <div class="menuBar">
       <ol id="navList">
         <li><img id="menuLogo" src="img/fullLogo.png"></li>
         <li><a href="index.html">HOME</a></li>
         <li><a href="approach.html">APPROACH</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="portfolio.html">PORTFOLIO</a></li>
         <li><a href="meetUs.html">MEET US</a></li>
         <li><a href="blog.html">BLOG</a></li>
         <li><a href="contact.html">CONTACT</a></li>
       </ol>
    </div>
</nav>

As you can see, I've tried putting the logo (the img file) in the to try and line it up. And here's my CSS:

CSS:

nav{
  width: 100%;
  margin: auto;
  background-color: white;
}

#navList{
  display: flex;
  flex-direction: row;
  width: 95%;
  margin: auto;
  justify-content: space-between;
}

#menuLogo{
  display: flex;
  width: auto;
  height: auto;
  max-width: 150px;
}

#navList li{
  list-style: none;
  border-bottom: none;
}

The logo (img file) keeps pushing the last

(Contact) off the right side of the page.

Answer 1

You can take logo out of ol and do somehing like this

 .menuBar { display: flex; align-items: center; justify-content: space-between; background: white; } img { width: 100px; height: auto; margin: 20px; } ol { display: flex; flex-wrap: wrap; list-style-type: none; } li { padding: 5px } 

 <nav> <div class="menuBar"> <img src="http://placehold.it/350x150"> <ol id="navList"> <li><a href="index.html">HOME</a></li> <li><a href="approach.html">APPROACH</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="meetUs.html">MEET US</a></li> <li><a href="blog.html">BLOG</a></li> <li><a href="contact.html">CONTACT</a></li> </ol> </div> </nav> 

Answer 2

You can use flex:1; on the first li .

 #navList { display: flex; flex-direction: row; width: 95%; margin: auto; padding: 0; } #navList li:first-of-type { flex: 1; margin: 0 } #navList li { list-style: none; border-bottom: none; margin: 1em 1em 0; /* eventually : */ white-space: nowrap; } nav { width: 100%; margin: auto; background: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)) bottom repeat-x; background-size: 100% 3px; background-color: white; } 

 <nav> <div class="menuBar"> <ol id="navList"> <li><img id="menuLogo" src="http://dummyimage.com/185x70/FF0&text=LOGO"></li> <li><a href="index.html">HOME</a></li> <li><a href="approach.html">APPROACH</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="meetUs.html">MEET US</a></li> <li><a href="blog.html">BLOG</a></li> <li><a href="contact.html">CONTACT</a></li> </ol> </div> </nav>