Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Giving a class to a navigation element

Started by Muut Archive 11 years ago · 5 replies · 257 views
11 years ago

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"

11 years ago

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.

11 years ago

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 %}

11 years ago

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

11 years ago

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' %}

11 years ago

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

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1334 9 years ago
Archive · by Muut Archive, 9 years ago
2 925 9 years ago
Archive · by Muut Archive, 9 years ago
2 4056 9 years ago
Archive · by Muut Archive, 9 years ago
1 2939 9 years ago
Archive · by Muut Archive, 9 years ago
3 1112 9 years ago