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

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Nav issues with Bootstrap4 child theme

first-time theme

Solved by Dusky View solution

Started by Dusky 6 years ago · 9 replies · 626 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.

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

I have this issue in both the original and my child theme, and fixing that line changes nothing. My nav bar is displaying the names of the modules on modular pages and child pages for others in the nav bar and nothing else.

I guess I might have to find a different Bootstrap-based theme to inherit.

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

@mfiZebra, That's true and also a recurring topic on the forum: Creating a menu mixing child modules with other pages.

6 years ago

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

6 years ago Solution

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 Pedro M, 2 months ago
4 198 2 months ago
Themes & Styling · by Ian, 2 months ago
3 94 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 456 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 48 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 128 3 months ago