Make the selected link in the navigation menu bold

[doaaron]

Hi! I'm trying to make the selected link in the navigation menu bold. In my mkdocs.yaml, my navigation menu is something like this:

nav:
- Home: index.md
- 'Menu 1':
- 'Doc 1': doc1.md
- 'Doc 2': doc2.md
- 'Doc 3': doc3.md

Suppose a user selects "Doc 1" in the left hand menu, I want the name 'Doc 1' in the left-hand menu to be bold to make it more visible. I tried playing around with docs/extra.css, but I couldn't get anything to work. The closest I got was to add this:

.md-nav__link:active {
font-weight: bold;
}

to extra.css, which seems to make the selected menu item bold while I'm pressing the mouse button on that item. Any help is much appreciated.

[kamilkrzyskow]

In the inspector you can check and see the classes used by the DOM elements.
However, note that the top nav header also uses the md-nav__item--active class.
Therefore you can use:

.md-nav__link--active {
    font-weight: bold;
}

Also the Material theme uses a similar approach to make the top nav header bold:

.md-nav__item--active > .md-nav__link {
    font-weight: bold;
}

Pick whichever you like ✌️

[doaaron]

Brilliant, thanks!