Skip to content
Grav 2.0 is officially stable. Read the announcement →
Themes & Styling

Nav issues with Bootstrap4 child theme

first-time theme

Solved by Dusky View solution

Started by Dusky 6 years ago · 9 replies · 755 views
6 years ago

I'm building a child theme for a website using the Bootstrap4 theme Trilby built, but the navigation is behaving strangely. Instead of displaying the main pages, the nav only displays the child pages of whatever page I'm on. I have changed nothing in the template.

6 years ago

@mfiZebra, I cannot reproduce your issue...

On the contrary, I found that the main pages are shown in the menu but the child pages are not, while variable dropdown.enabled is set to true in /user/config/themes/mychildtheme.yaml.

This is caused by a bug in /user/themes/bootstrap4/templates/partials/navigation.html.twig. It uses a hardcode reference to the bootstap4 configuration variable. Due to this bug, theme inheritance is broken.

TWIG
line 15: {% if config.themes.bootstrap4.dropdown.enabled and page.children.visible.count > 0 %}
                      ^---- hardcoded reference

Should be:

TWIG
line 15: {% if theme.dropdown.enabled and page.children.visible.count > 0 %}
 -- or --
line 15: {% if config.theme.dropdown.enabled and page.children.visible.count > 0 %}

It appears the bug is logged as an issue in November 2018, but still not addressed.

1 reply
last edited 06/05/20 by pamtbaau
6 years ago

Hi @mfiZebra,

You say you're building a child theme. You didn't edit the navigation template, but I suppose you changed some other templates. Did you reassign the pages variable in any of your templates maybe?

6 years ago

No, double-checking, the original template has this issue, too.

6 years ago

@mfiZebra, Ah! You are using modular pages...

When using a modular page, Bootstrap4 (and others) create a menu showing only the child modules of the modular page by default. They also implement the option to disable this so called 'onpage' menu by setting a variable in the frontmatter of the modular page. Eg:

frontmatter of modular.md

TXT
onpage_menu: false

Have you tried that?

6 years ago

I had not. That kind of works, but now I don't get a dropdown menu for child pages at all.

6 years ago

Any way to fix that? It's not really an option to not have fully-functional nav.

6 years ago Solution pamtbaau @mfiZebra, That's true and also a recurring topic on the forum: Creating a menu mixing chi…

So looks like if you fix the inheritance issue correctly (I missed that you made "themes" to "theme), it also fixes the dropdown issue. Gonna go submit a PR for that on the repo. Thanks for the help!

ETA: Solution was a combination of fixing the inheritance issue and inserting the onpage_menu: false on all pages. I have submitted a PR to the theme's GitHub repo to fix this issue, because upon testing, the fix also repairs the navigation issue in the Bootstrap4 theme itself.

👍 1
last edited 06/05/20 by Dusky

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Sebadamus, 7 days ago
5 148 15 hours ago
Themes & Styling · by martynfoster735, 1 week ago
1 193 1 week ago
Themes & Styling · by Justin Young, 3 weeks ago
1 241 3 weeks ago
Themes & Styling · by Slebeig, 1 month ago
4 376 1 month ago
Themes & Styling · by Pedro M, 3 months ago
4 745 3 months ago