Highlighting of Menu Items


This is a general question. Typically, the current page is highlighted on a nav menu bar. However, if the current page is a child of a parent menu item, only the child is highlighted. The parent is not. Is it possible to highlight both the child and its parent? Thanks.

Of course, you can highlight anything you like on a page. The parent element will just need an appropriate class applied to it, and styling applied to that class.

Could you provide a bit more detail please.

The standard class to use for this is “current”, so the HTML may be like:-

<li class="current">

And CSS:-

.current {
    color: red;
    background: white;

If the sub menu is nested within the parent, you will have to watch the specificity, probably put a class on the sub menu, to not highlight all sub items (unless you want that).

1 Like

Here is a general anwser:

Pure CSS automagic current page highlighting of a nav item or its link child could be set up like this:

  1. Give the body a class of “home”.
  2. Give the nav item for the home link the class “home”.
  3. Style the combo of body.home and li.home a with the current page highlighting.

There are different client or server-side script methods not mentioned here as this is the HTML&CSS department

1 Like

Thank you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.