Custom styling on nav items

[duanemck]

Is there some way to add a custom CSS class onto specific nav items?

For example, I have a top nav using Material for mkdocs but I would like the last item in the list to float all the way to the right. I can figure out the CSS to do this but I would need a way to apply it to a specific menu item.

[kamilkrzyskow]

Hello @duanemck, weird place to ask the question, as CSS is related to front-end and more of a theme specific request. The plugin only modifies the "back-end" MkDocs structure that is later rendered into HTML and then styled with CSS.

As for the question this might help you out: https://github.com/squidfunk/mkdocs-material/discussions/6547#discussioncomment-7917358 If the nav item has a link or some unique attribute you can use a selector to target it specifically.

[duanemck]

Thanks @kamilkrzyskow , apologies I wasn't aware of exactly where this plugin fits in but I could see it was responsible for processing the .pages file where I configure the nav.

This doesn't have to be CSS specific, more generally I was asking if there was some way to alter the generated HTML in a similar way that one can use the attr_list markdown extension in markdown files.

Thanks for that link, I hadn't considered targeting the CSS using the [href] selector, I think that may just solve my problem.