Need help? Check out our Support site, then


Oxygen Current Menu Item Styling

  1. 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:

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

    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.

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

  3. anyone?

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags