CSS: Wrapping Menus Arround a Logo

In this tutorial we will look at the basics of bending a logo around a logo. We will only be looking at the basic of doing ti today. To get a menu to wrap around your logo will require you to fine tune the positioning of menu list items. Every logo is different and every menu item need to be place using CSS individually. So unfortunately there is no cut and paste solution to this problem. However we can show you the basic’s so that you can begin wrapping your menu around your logo as suits you.

This is an image of roughly what it looks like. This is a rough menu and before I used it I would refine the positioning more but it does give you an idea of what is posible using this technique.

CSS: Wrapping Menu’s around your Logo

For this excerise we are going to use exactly the same HTML and CSS styling we did for the staggered menu. For those that missed it. the HTML is like any other CSS/HTML menu.

<div id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

This is a horizontal menu sitting dirrectly under our header image. Have your header image as a background image. Next we need to style up our buttons and our list items much the same as we would with any other menu.

#menu {
  height: 40px;
  width: 982px;
  padding-right: 10px;
  padding-left: 10px;
}
#menu ul {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
  margin-top: 0px;
  padding-top: 0px;
}
#menu ul li {
  display: inline;
  margin-right: 20px;
  margin-left: 20px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  line-height: 40px;
  border: 1px solid #333;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 1px #333;
  background-color: #09C;
}
#menu ul li a {
  color: #000;
  text-decoration: none;
}

Only thing new here from our last menu (the staggered menu) is we have increased the margin between our list item to soften the curve we are creating.

#menu li:nth-of-type(1)
{
  position: relative;
  z-index: 1;
  top: -15px;
  margin-left: 125px;
}

Now we are going to use nth-of-type selectors to individually position each of our menu items. In this example we have added 125px of margin off to the left to push our margin over slightly to give us more room for our logo.

#menu li:nth-of-type(2)
{
  position: relative;
  z-index: 1;
  top: -35px;
}
#menu li:nth-of-type(3)
{
  position: relative;
  z-index: 1;
  top: -80px;
  margin-left: -10px;
}
#menu li:nth-of-type(4)
{
  position: relative;
  z-index: 1;
  top: -155px;
  margin-left: -20px;
}

We ahve now positioned each of the other menu items individually. Note that each one goes up higher than the one before it did. If they went up by the same amount each time we wouldn’t get our curve. Also as we get towards the end we start to drag our last two menu items by reducing their margin to improve the curve we have got going here.

By playing with our margins and our top position setting we are now able to fine tune our menu items to exactly where we want them around our logo.