Oxygen Current Menu Item Styling

• 

  richwoodward · Member · Apr 28, 2013 at 7:55 am

  • Copy link
  • Add topic to favorites

  The blog I need help with is carvingnature.net.

  I’m trying to code the main menu so the current page item has a bottom border. I tried to following code:

  
.main-navigation li.current_page_item a {
border-bottom: 1px;
border-style:solid;
border-bottom-color:#00FFFF;
}

  .main-navigation li.current_page_item a:hover {
  border-bottom: 1px;
  border-style:solid;
  border-bottom-color:#00FFFF;
  }

  This adds the bottom border to the current menu item (so the first bit seems to work) but the border disappears when I hover on the current menu item.

  Any thoughts? Thanks in advance.

  The blog I need help with is: (visible only to logged in users)

• 

  richwoodward · Member · Apr 28, 2013 at 7:57 am

  • Copy link

  Sorry, not idea why that is garbled: the code is:

  .main-navigation li.current_page_item a {
  border-bottom: 1px;
  border-style:solid;
  border-bottom-color:#00FFFF;
  }

  .main-navigation li.current_page_item a:hover {
  border-bottom: 1px;
  border-style:solid;
  border-bottom-color:#00FFFF;
  }

• 

  richwoodward · Member · Apr 30, 2013 at 6:41 pm

  • Copy link

  anyone?

• 

  designsimply · Member · May 3, 2013 at 11:26 am

  • Copy link

  That’s happening because there is a more specific rule elsewhere in the CSS. Here is the rule:

  #masthead a:hover {
  border-bottom: none;
  }

  A rule based on an ID (using “#” at the beginning) is stronger than a rule based on a class (using a “.” at the beginning).

  You can override the other rule by making your rule stronger. One way to do that would be to add #masthead at the beginning of your selectors like this:

  #masthead .main-navigation li.current_page_item a:hover

  Also note that you can combine the two since the properties in each one are exactly the same. Here is an example:

  #masthead .main-navigation li.current_page_item a,
  #masthead .main-navigation li.current_page_item a:hover {
  	border-bottom: 1px;
  	border-style:solid;
  	border-bottom-color:#00FFFF;
  }