Jump to content


Photo
- - - - -

Nav CSS Top Border


  • Please log in to reply
15 replies to this topic

#1 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 17 April 2013 - 01:55 PM

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.



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 17 April 2013 - 02:03 PM

Could we have a link to the site please?



#3 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 17 April 2013 - 02:04 PM

I'm running it locally.



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 April 2013 - 02:28 PM

Can you please paste the CSS you're using?



#5 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 18 April 2013 - 02:00 PM

Okay, I put the site up online to make this easier.

 

Please Login or Register to see this Hidden Content



#6 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 18 April 2013 - 11:16 PM

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

Please Login or Register to see this Hidden Content



#7 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 19 April 2013 - 02:16 PM

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?



#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 April 2013 - 02:36 PM

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.



#9 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 19 April 2013 - 02:40 PM

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?



#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 April 2013 - 03:12 PM

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.



#11 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 19 April 2013 - 03:16 PM

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


#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 April 2013 - 04:24 PM

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



#13 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 19 April 2013 - 04:32 PM

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


#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 April 2013 - 04:37 PM

In this code you can try removing the > signs:

Please Login or Register to see this Hidden Content



#15 couturemotion

couturemotion

    Advanced Member

  • Members

  • 51 posts
  • Country: Country Flag

Posted 19 April 2013 - 04:46 PM

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


#16 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 April 2013 - 04:51 PM

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?