WordPress.org

Forums

[resolved] .current-menu-item ignores me! (8 posts)

  1. bobbekaer
    Member
    Posted 2 years ago #

    Hi

    I am woking on http://corearkitekter.dk/wp/projekter/

    I have been styling the menu in the top - but I can't get hold of the .current-menu-item a. The rest of the styling of the menu works fine, but with .current-menu-item...nothing!

    I want the current page and parents (in each level of the 3-layer menu) to be black.

    I build this menu using Custom Menu Wizard. The theme is a customized Responsive.

    ??? :-D
    Bolette

  2. CrouchingBruin
    Member
    Posted 2 years ago #

    Is this the CSS you were trying to use?

    .menu-item a .current-menu-item a {
        color:           #000;
        font-weight:     bold;
    }

    Try adding this to the end of your child theme style.css file instead:

    .current-menu-item a:link,
    .current-menu-item a:visited {
        color:           #000;
        font-weight:     bold;
    }
  3. roiabrazaldo
    Member
    Posted 2 years ago #

    first of all your :

    .menu-item a .current-menu-item a {
        color:           #000;
        font-weight:     bold;
    	}

    is missing comma in between them. idk

    it should be like this

    .menu-item a, .current-menu-item a

    after that add this though, it fixes it but makes the upper one redundant in a way

    .current-menu-item a {
        color:           #000 !important;
    	}

    or you can add the !important on that original one

  4. CrouchingBruin
    Member
    Posted 2 years ago #

    The use of the !important clause should be avoided if at all possible. In fact, the only time you really need to use it is to override an inline style or to override another rule with an !important clause. In my experience, people use the !important clause when they don't understand CSS specificity, and over-using it, or mis-using it, only leads to problems later on when you're trying to make changes.

    Really, the only thing you need to do is use a web debugging tool like Firebug or Chrome Developer Tools, find out what CSS rule is affecting the element you want to change, then write a rule with the same selector, or one that is slightly more specific.

  5. roiabrazaldo
    Member
    Posted 2 years ago #

    well you are right about that. its really unsafe to use important if you dont know the whole thing that causes the error display.

    I just always create wordpress themes from scract so using !important to me is fine because I know everything inside the theme.

  6. bobbekaer
    Member
    Posted 2 years ago #

    Thank you guys.

    roiabrazaldo, if I add the comma, every menu-item is changed because the comma says " these two classes should be affected". This is not what I was looking for - but thanks anyway :-D

    But CrouchingBruin, this worked perfect :-) I added parent and ancestor, so now I have exactly what I was looking for - gracias or "tak" as we say in Denmark...

  7. CrouchingBruin
    Member
    Posted 2 years ago #

    You're welcome, and that's a very interesting and unique way that you have your submenus set up, instead of the normal drop-down lists. I don't think I've ever seen that before.

  8. bobbekaer
    Member
    Posted 2 years ago #

    Thank you :-) ...now I am really pleased with the result...

Topic Closed

This topic has been closed to new replies.

About this Topic