Nav issues with Bootstrap4 child theme

Support Themes & Styling
,
1

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.

2

@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.

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

Should be:

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.

3

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?

4

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

5

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

@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

onpage_menu: false

Have you tried that?

7

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

8

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

9

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

10

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 Like