Geek Answers Handbook

Using HTML flex / CSS in the navigation bar to display the logo left, menu right

I am trying to encode a flexible horizontal navigation bar using flexible display (see the attached figure for the final project), but I can not get the vector logo size down and left. Here is 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 tried to put the logo (img file) in the file in order to try to build it. And here is 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) continues to push the last

(contact) on the right side of the page. enter image description here
+4
source share
2 answers

You can take the logo out oland do something 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>
Run codeHide result
+2

flex:1; 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>
Hide result
0

More articles:


All Articles