Highlighting Parent and Current child page

  • For this website (https://alturl.com/6eu3o) I’m trying to let wordpress highlight the current parent + current child menu item. Its working for the parent menu item, but somehow it highlights all children under the parent page, iso just the one that is active.

    Whats going wrong here?

    Css:

    #outheader #header #navigation #menu #nav .current_page_item a,
#outheader #header #navigation #menu #nav .current_menu_item a,
#outheader #header #navigation #menu #nav .current_page_parent a {
	background-image: url(../images/achtergrond/headerinfo.png);
	background-repeat: repeat-x;
}

Viewing 6 replies - 1 through 6 (of 6 total)

  • What you want to do is add another style for sub pages:

    #outheader #header #navigation #menu #nav .current_page_item li a {
    background-image: none;
    color: #000 — or whatever colour you want.
    }

    Good luck. I find doing the CSS for nav to be the more frustration part…

    Thread Starter lerrie

    (@lerrie)

    Not working unfortunately. Still the same issue.

    Current css:

    #outheader #header #navigation #menu #nav .current_page_item a,
#outheader #header #navigation #menu #nav .current_menu_item a,
#outheader #header #navigation #menu #nav .current_page_parent a{
	background-image: url(../images/achtergrond/headerinfo.png);
	background-repeat: repeat-x;
}

#outheader #header #navigation #menu #nav .current_page_item li a {
	background-image: url(../images/achtergrond/headerinfo.png);
	background-repeat: repeat-x;
}

    You want to apply it to all the styles…

    #outheader #header #navigation #menu #nav .current_page_item li a,
    #outheader #header #navigation #menu #nav .current_menu_item li a,
    #outheader #header #navigation #menu #nav .current_page_parent li a{
    color: red;
    }

    And if you use the same styles as the parents, it won’t look different. Look at the HTML source and Firebug to troubleshoot this.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @lerrie You can discuss CSS issues in CSS forums such as https://csscreator.com/forum

    Thread Starter lerrie

    (@lerrie)

    The thing is that I want the parent (Trainingskampen) + the child (Trainingskamp Voetbal) in this case, to have the blue bg, not the other 2 childs (Trainingskamp atletiek, Trainingskamp zwemmen)

    @andrew nevins: .current_page_item etc. is WordPress specific. [LOL]

    Thread Starter lerrie

    (@lerrie)

    Seccond try. I’ve changed the css + added the current_page_ancestor from fedback I received on a different post, but now the menu (https://alturl.com/6eu3o) is highlighting all child pages.

    Current css:

    #outheader #header #navigation #menu ul#nav li.current_page_parent a {
	background-image: url(../images/achtergrond/headerinfo.png);
	background-repeat: repeat-x;
}

#outheader #header #navigation #menu ul#nav li.current_page_item a {
	background-image: url(../images/achtergrond/headerinfo.png);
	background-repeat: repeat-x;
	}
#outheader #header #navigation #menu ul#nav li.current_page_ancestor a {
	background-image: url(../images/achtergrond/headerinfo.png);
	background-repeat: repeat-x;
	}

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Highlighting Parent and Current child page’ is closed to new replies.