Oxygen Current Menu Item Styling

  • Author
    Posts
  • #1248164

    richwoodward
    Member

    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 carvingnature.net.

    #1248255

    richwoodward
    Member

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

    #1248459

    richwoodward
    Member

    anyone?

    #1248495

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

The topic ‘Oxygen Current Menu Item Styling’ is closed to new replies.