Trying to give a border-bottom to my nav menu item

Question

I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.

I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.

Can someone give me a little help understanding what is happening?

My Html:

<nav id="menu">
    <ul>    
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>

My CSS:

#menu
{
    width:960px; 
    height:auto; 
    margin:0 auto 0 auto;
    background:green;
}

#menu ul
{
    list-style-type:none;
}

#menu ul li 
{ 
    height:46px;
    line-height:46px; 
    font-family:'arial'; 
    font-weight:300;
    display:inline-block;
    position:relative;
}

#menu ul li a
{
    text-decoration:none;
    color:#ccc;  
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px;
    font-size:20px;     
}

// this boder is behind the menu!

#menu ul li.active a
{
    color:#fff;
    border-bottom:1px solid  #000;
}

My jsfiddle:

http://jsfiddle.net/mibb/Y4HKF/

score 2 · Accepted Answer · answered Mar 29 '14 at 18:05

2

It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.

To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:

#menu ul li a {
  text-decoration:none;
  color:#ccc;        
  margin-right:5px; 
  height:46px; 
  line-height:46px; 
  padding:0 5px 0 5px;
  font-size:20px;     
}

answered Mar 29 '14 at 18:05

King King

61,710
16
105
130

1

Thank you for your answer and explication! It works just like I want! :) – OzzC Mar 29 '14 at 18:39
By the way, do you know if its possible give a different with to my border-bottom? because I want it smaller! – OzzC Mar 29 '14 at 18:41
@CesarM what do you mean by smaller? the bottom border is too long? – King King Mar 29 '14 at 18:42
Yes, change the width of my border-bottem to a smaller width. My idea was draw a small circle below the active menu item, but as I can not imagine how it, to draw a circle with CSS, I was trying to make a border-bottom but a border-bottom smaller than the border-bottom default with. – OzzC Mar 29 '14 at 18:52
@CesarM I can't imagine how your circles look under the link text, but if it's just to make the border shorter, I think it's possible, it requires more css tweaks. – King King Mar 29 '14 at 18:55

score 1 · Answer 2 · answered Mar 29 '14 at 17:34

1

Just add the box-sizing:

#menu ul li.active a {
    box-sizing: border-box;
}

answered Mar 29 '14 at 17:34

KittMedia

7,368
13
34
38

score 1 · Answer 3 · answered Mar 29 '14 at 17:35

you set the border to an anchor. an anchor will just take the space of whatever element its in/around, so setting border to an anchor is like setting it to the <li> itself.

you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.

here is an example:

http://jsfiddle.net/TheBanana/Y4HKF/5/

score 1 · Answer 4 · edited May 23 '17 at 12:09

I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.

Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.

See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?

Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)

In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.

The HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <nav id="menu">
      <ul>  
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contacts</a></li>
      </ul>
  </nav>

The CSS:

#menu
{
width:960px; 
height:auto; 
margin:0 auto 0 auto;
    background:green;
}

#menu ul
{
list-style-type:none;
}

#menu ul li 
{ 
height:46px;
line-height:46px; 
font-family:'arial'; 
font-weight:300;
display:inline-block;
position:relative;

}

#menu ul li a
{
text-decoration:none;
color:#ccc;  
display:block; 
margin-right:5px; 
height:46px; 
line-height:46px; 
padding:0 5px 0 5px;
font-size:20px;     
}

/* this boder is behind the menu! */

#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}

The JSFiddle:

http://jsfiddle.net/mibb/Y4HKF/

Trying to give a border-bottom to my nav menu item

4 Answers4