Question

I’m sure I’ve seen this question on Stack Overflow before, but I couldn’t find it by my life, so here goes nothing.

I have a normal Django menu which uses the {% url %} tag and static names for the menu items. Now I want to have a different style for the menu item which has been selected. But the menu is being rendered in the base template, so how do I figure out which menu item it is?

Answer 1

You could surely do this with some ugly template code, but a better more globally known way is to use a CSS selector. This lets CSS do all of the work automatically for you.

Here’s how it works:

You simply put an id in your body depending on which page you are on.
Then in css you do something like this:

#section-aboutme #nav-aboutme,
#section-contact #nav-contact
/* ... put one of these per body/menu item ... */
{
    font-color: red;
}

You put the nav-aboutme, and nav-contact ids on each of your menu items.

The style will automatically be selected by CSS depending on which body id they are inside of.