Giving a class to a navigation element

Archive
1

In my header navigation pane I have all texts capitalized but would like to use camelCase in the name of the first one, to override the default styling I would need to have a class defined for the home link in the modular.md.

Tried to add a custom class by the default fields in modular.md but I guess they are not for this purpose… And from the documentation I wasn’t able to find the solution.

title: Home page
menu: homePageNotCapitalized
onpage_menu: true
body_class: "custom"
header_class: “custom”

2

you can add a custom param option in the header of the page, you would just need to look for this and do something with it. it will require you editing the Twig file though to look for this header variable and output it as a class on the <li> tag or something.

3

Ok, thought maybe it is definable from the modular.md or in some of the .md files but well, I’m starting to learn twig:

<a href=“{{ page.url }}”
{% if page.menu == “MyMenu” %}
style=“text-transform: none;”
{% endif %}

4

you can get a custom header by using: page.header.my_custom_class, but your on the right track.

5

You mean if there would be a page.header that would be an object that is a html element? It seems to me like page.xyz like page.menu is returning just a string so wouldn’t work in my case what you suggest. If I understand it rightly what you are suggesting, is that when invoking the page.header in my base or some template files I could assign a class by simply {page.header.my_custom_class}, in my template the header is included with this line: {% include ‘partials/header.html.twig’ %}

6

page.header is an object that contains all the stuff you set in your YAML frontmatter for your page.