New Installation - Navigation Menu and Table Styling

Support Content & Markdown
4

Alright, I think I’ve resolved the navigation menu behavior problem.
I found some information about creating an inherited theme for the site, and modifying the macros.html.twig file. The post is located here: Quark: Dropdown menu, make top-level 'non-clickable' - #2 by anon76427325

I followed the steps on the theme tutorial page to create a new inherited theme:

bin/gpm install devtools
bin/plugin devtools new-theme

I then created a macros directory in the new theme directory, then copied the macros.html.twig file from the Quark theme to the new theme:

mkdir user/themes/quark-inherited/templates/macros
cp user/themes/quark/templates/macros/macros.html.twig user/themes/quark-inherited/templates/macros/macros.html.twig

After creating the directory, I also had to set the correct ownership and permissions:

chown -R root.www-data quark-inherited
chmod -R g+w quark-inherited/

I then ensured that the options in user/themes/quark/quark.yaml and user/themes/quark-inherited/quark-inherited.yaml matched.

Then I copied the form section (lines 20 through EOF) from user/themes/quark/blueprints.yaml to the user/themes/quark-inherited/blueprints.yaml file.

Once those steps were completed, I then made the recommended modification to user/themes/quark-inherited/templates/macros/macros.html.twig by replacing the contents of lines 6 - 13:

<a href="{{ p.url }}" class="{{ active_page }}">
    {{ p.menu }}
</a>
{% if p.children.visible.count > 0 %}
<ul>
    {{ macros.nav_loop(p) }}
</ul>
{% endif %}

With the following:

{% if p.children.visible.count > 0 %}
	<a class="{{ active_page }}"> {# Without 'href' it doesn't do anything #}
		{{ p.menu }}
 	</a>

 	<ul>
		{{ macros.nav_loop(p) }}
	</ul>
{% else %}
	<a href="{{ p.url }}" class="{{ active_page }}">
		{{ p.menu }}
	</a>
{% endif %}

Once that was done, I saved the macros.html.twig file and activated the new theme through the admin panel. Despite being an inherited theme, it did not inherit the logo image files I’d uploaded to the original theme, so I had to upload those again.
Once that was done, everything looked identical to the old theme.

Testing the navigation menu behavior confirmed that menu items were no longer “clickable” and behaved as expected.