Question

I am relatively new to front-end development so having a bit of an issue in finding the best way to organize a horizontal menu, which will contain a logo and a few menu options. In addition, I want to separate the horizontal menus by a wide |

Not sure how to do that.

This is what I have so far:

HTML:

 <header> 
 <img src="/images/logo.png" height="50px" id="front" />
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav> 

CSS:

 body {
 margin: 0;
 background-color: #FFFFFF;
 }
 header {
 background-color: #009000;
 height: 85px;
 position: relative;
 }
 #front {
 margin-left: 20px;
 margin-top: 20px;
 }
 ul li {
 display: inline;
 list-style-type: none;
 margin-right: 34px;
 }

Answer 1

This worked for me. Instead of using the pipe character, each list element (gotten with the selector “ul li”) has a thin right-hand border. You could also add <li> | </li> between each list item.

Also, I’m floating the li elements left, rather than displaying them inline. Not sure if you want the nav inside of the header.

HTML:

<header>
  <img src="/images/logo.png" height="70px" id="front" />
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="last"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

CSS:

body {
    margin: 0;
}
header {
    background-color: #009000;
    height: auto;
    position: relative;
}
#front {
    margin-left: 20px;
    margin-top: 20px;
    float: left;
}
nav {
    float: left;
    margin-top: 30px;
}
ul {
    margin: 0;
    padding: 0;
    float: left;
}
ul li {
    list-style-type: none;
    float: left;
    border-right: 2px solid black;
    padding-right: 5px;
    padding-left: 5px;
}
ul li.last {
    border-right: 0px;
}