Jump to content
Sign in to follow this  
couturemotion

Nav CSS Top Border

Recommended Posts

couturemotion    0
couturemotion

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
greenfly    230
greenfly

Could we have a link to the site please?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
couturemotion    0
couturemotion

I'm running it locally.

Share this post


Link to post
Share on other sites
James B    436
James B

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
couturemotion    0
couturemotion

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
couturemotion    0
couturemotion

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
couturemotion    0
couturemotion

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
couturemotion    0
couturemotion

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
catrina    103
catrina

In this code you can try removing the > signs:

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

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
couturemotion    0
couturemotion

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×