Archived

This topic is now archived and is closed to further replies.

  • 0

Nav CSS Top Border

Question

Posted · Report post

I've been trying for days to add a 5px top border to my menu item when the mouse hovers over it.  However I cannot seem to make it work.  I'm using Firefox to find the accurate css, but I seem to be a pretty bad student when it comes to firefox because the css that I apply it to never seems to work, the image is not affected.

 

Any help would be greatly appreciate.

Share this post


Link to post
Share on other sites

15 answers to this question

Posted · Report post

Hi there,

 

If you're looking to put a border on the main menu item when its on hover the css would look like the below

.main-nav li a:hover:hover, .main-nav li.current_page_item > a:hover, .main-nav li.current-page-ancestor > a:hover {
    background-color: #F6F6F6;
    border-top: 1px solid black;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Could we have a link to the site please?

Share this post


Link to post
Share on other sites

Posted · Report post

I'm running it locally.

Share this post


Link to post
Share on other sites

Posted · Report post

Can you please paste the CSS you're using?

Share this post


Link to post
Share on other sites

Posted · Report post

Okay, thanks James, that worked.  However, as I roll over the element the whole nav and everything below it moves down the page like 10 pixels.  I'm thinking that an easy way to combat this problem is to just have that top border be white, except when they roll over and it is red... what would the class be for that?

Share this post


Link to post
Share on other sites

Posted · Report post

Your thinking is correct. Just make the top border white using the same CSS (same selector, but with no a:hover) and change the border color to white.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Catrina...

 

This is what I tried:

 

 
.main-nav li, .main-nav li.current_page_item, .main-nav li.current-page-ancestor {
    border-top: 2px solid #000;
}
 

did not work for me... :(  Any thoughts?

Share this post


Link to post
Share on other sites

Posted · Report post

The color should actually be #FFF instead of #000. You should try adding the letter "a" after .main-nav li and the other two selectors after it.

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Catrina,

 

It still doesn't like me :(.  I made it black so I could see if it worked.  This is what I put in:

 

 

.main-nav li a, .main-nav li.current_page_item > a, .main-nav li.current-page-ancestor > a {
    border-top: 2px solid #fff;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Is the top border for hover 10px or 2px?

Share this post


Link to post
Share on other sites

Posted · Report post

Here is the code for both:

 

 

.main-nav li a:hover:hover, .main-nav li.current_page_item > a:hover, .main-nav li.current-page-ancestor > a:hover {
    border-top: 3px solid #692e30;
}
 
.main-nav li a, .main-nav li.current_page_item > a, .main-nav li.current-page-ancestor > a {
    border-top: 3px solid #fff;
}

Share this post


Link to post
Share on other sites

Posted · Report post

In this code you can try removing the > signs:

.main-nav li.current_page_item > a, .main-nav li.current-page-ancestor > a

Share this post


Link to post
Share on other sites

Posted · Report post

Pagelines CSS doesn't like me... still didn't work.

 

code:

 

.main-nav li a:hover:hover, .main-nav li.current_page_item > a:hover, .main-nav li.current-page-ancestor > a:hover {
    border-top: 3px solid #692e30;
}
 
.main-nav li a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor a {
    border-top: 3px solid #fff;
}

Share this post


Link to post
Share on other sites

Posted · Report post

In Firebug the code for the non-hover links is shown as being overwritten by something else. What other CSS do you have in custom CSS?

Share this post


Link to post
Share on other sites