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

css, html, html-lists, uinavigationbar

Solution

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>

Problem

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; } ```

Original source