Highlighting of Menu Items

HTML & CSS
1

Hello,

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.

2

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.

3

Could you provide a bit more detail please.

4

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
5

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
6

Thank you.

7

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