CODEWITHSUNDEEP
cssimagespacenav
Zach
Zach

Reputation: 19

Image in CSS nav bar

I'm trying to add an icon as the last link in my navigation bar.

It is adding too much space to the entire ul, even though the image does not extend a single pixel beyond the blue gear.

I've tried setting margins, padding, and line-height to 0, it still extends the block.

Nav Bar nav bar

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: sans-serif;
}

li {
    float: left;
}

li a {
    color: white;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
}

HTML

<ul class="menu">
  <li><a href="#">PRODUCTION</a></li>
  <li><a href="#">OFFICE</a></li>
  <li><a href="#">SALES</a></li>
  <li><a href="#">MISC</a></li>
  <li><a href="#">ADMIN</a></li>
  <li><a href="#">GEAR</a></li>
  <!--<li><a id="gear" href="#"><img src="gear.png"/></a></li> -->
</ul>

Image Gear Image

Upvotes: 0

Views: 6296

Answers (1)

MassDebates
MassDebates

Reputation: 917

You can easily add in this CSS rule, to make sure the image never goes larger than the text around it.

.menu img {
  height:1em;
}

Without an accurate image file, I can't come up with a more specific/elegant solution:

Here's a working example: http://codepen.io/anon/pen/LZRaWL

If the gear is too small, then reduce the padding and increase the size of the gear. Here's a secondary example in which I've taken advantage of the relative sizing for em units: http://codepen.io/anon/pen/gMwEmj

Upvotes: 2

Related Questions