Add a picture/logo in a HTML-list/Navigation menu

Question

I'm creating a floating navigation menu for my page list in my blog, and within that list I'm trying to change one of the links into my logo. Some would just include the logo in the background of this navigation menu, but my problem is that the logo is like a ribbon that overlaps the things below, and if it were part of the background it would be cut off.

Here's what I mean.

At the moment the logo is a separate picture, but I'd like to connect them both, and include it as another 'link' because otherwise it's hiding the things below it.

html USED:

<div id='nav'>
  <p class='title'><a href='#'></a></p>
  <ul id='navigation'>
    <li class='navigation-Blog'><a href='#'>Blog</a></li>
    <li class='navigation-Crew'><a href='#'>Crew</a></li>
    <li class='navigation-Promos'><a href='#'>Promos</a></li>
    <li class='navigation-Tricks'><a href='#'>Tricks</a></li>
    <li class='navigation-Parties'><a href='#'>Parties</a></li>
    <li class='navigation-P.J.Squad'><a href='#'>P.J. Squad</a></li>
    <li class='navigation-Chat'><a href='#'>Chat</a></li>
    <li class='navigation-Fanart'><a href='#'>Fanart</a></li>
    <li class='navigation-Graphics'><a href='#'>Graphics</a></li>
    <li class='navigation-Beta'><a href='#'>Beta</a></li>
  </ul>
</div>

and the CSS I used:

 #nav
     {
      background: url(http://4.bp.blogspot.com/-dVtgikk-    kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top center;     background-color: none;
     width:100%;
     height:66px;
      box-shadow: 0px 1px 10px #5E5E5E;
      position:fixed;
      top:0px;
    }

.title
 {
display:none;
 color:#EDEDED;
 font-family:verdana;
 font-size:25px;
 width:350px;
 margin-top:6px;
 margin-left:150px;
 font-weight:bold;
 float:left;
}


#navigation
{
 list-style-type:none; 
}


li 
{ 

display:inline;
 padding:15px;
 }
#nav a
{
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
 font-weight: bold;
 font-family:century gothic;
  text-decoration:none;
 color:#262626;
 opacity:0.26;
} 
 #nav a:hover 
{
opacity:0.36;
}

Answer 1

Place the logo in an image element. If you want the logo to link to your home page, wrap it in a link.

See example left and example centered.

To center: Float the logo to the left and give the nav a width. Split the navigation into two uls and change the id of navigation to a class of navigation.

Place the logo image in between the two uls.

Add this to your CSS:

#logo { float: left; }
#nav { width: 1500px; /* Too large, just an example */ }
.navigation { float: left; }

The image in between your two navigation uls:

#logo {
  float: left;
}

#nav {
  width: 1500px;
  /* Too large, just an example */
}

.navigation {
  float: left;
  list-style: none;
  padding: 0;
}

<div id='nav'>
  <ul class='navigation'>
    <li class='navigation-Blog'><a href='#'>Blog</a></li>
    <li class='navigation-Crew'><a href='#'>Crew</a></li>
    <li class='navigation-Promos'><a href='#'>Promos</a></li>
    <li class='navigation-Tricks'><a href='#'>Tricks</a></li>
    <li class='navigation-Parties'><a href='#'>Parties</a></li>
  </ul>
  <img src="http://placehold.it/152x198" id="logo" />
  <ul class="navigation">
    <li class='navigation-P.J.Squad'><a href='#'>P.J. Squad</a></li>
    <li class='navigation-Chat'><a href='#'>Chat</a></li>
    <li class='navigation-Fanart'><a href='#'>Fanart</a></li>
    <li class='navigation-Graphics'><a href='#'>Graphics</a></li>
    <li class='navigation-Beta'><a href='#'>Beta</a></li>
  </ul>
</div>

Answer 2

You can add elements inside a list item, so play around with the code below and see if this gets you closer to what you want. Here's the html for the list item that contains the logo. Just slide it in-between your other list items, if you want it in the center of the menu.

<li>
<a href="#">
<span class="span-logo">
<img src="your-logo-goes-here.png" />
</span>
</a>
</li>

Here's the CSS. You'll want to assign min-height on your nav or leave the height out because when you shrink the page, the menu items will start another line, and a flexible height will expand to include all the menu items.

#nav {
 min-height:66px;
}

.span-logo {
display: inline-block;
vertical-align: top;
height: 118px;
width: 152px;
}

If you decide to use inline-block for your li menu items, remember inline-block needs vertical-align:top; and has a small gap around each item. The gap is easy to remove, and here's a good article on inline-block:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

---

Using the Browser's Developer Tools

You can click on F12 in most browsers to open the Developer Tools. Depending on your browser, you can click on individual elements within the page to view its CSS and HTML, and you can edit, add or delete the code. This is very helpful when troubleshooting, or seeing how an element is constructed. You can edit the code in the browser and see the results, versus going back and fourth between editing your actual html code, and refreshing the browser. Currently CodeSchool.com is offering a really good free course on Chrome's Developer Tools: https://www.codeschool.com/courses/discover-devtools.