Use dropmenu for single page navigation

templates/modular.html.twig

@@ -1,50 +1,27 @@
 {% extends 'partials/base.html.twig' %}
 
-{% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
 {% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
 
 {% block javascripts %}
-    {% if show_onpage_menu %}
-        {% do assets.add('theme://js/singlepagenav.min.js') %}
-    {% endif %}
+    {% do assets.add('theme://js/singlepagenav.min.js') %}
+
     {{ parent() }}
+
 {% endblock %}
 
 {% block bottom %}
     {{ parent() }}
-    {% if show_onpage_menu %}
-        <script>
-        // singlePageNav initialization & configuration
-        $('ul.navigation').singlePageNav({
-            offset: $('#header').outerHeight(),
-            filter: ':not(.external)',
-            updateHash: true,
-            currentClass: 'active'
-        });
-        </script>
-    {% endif %}
-{% endblock %}
 
-{% block header_navigation %}
-    {% if show_onpage_menu %}
-        <ul class="navigation">
-        {% for module in page.collection() %}
-            {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
-            <li><a class="{{ current_module }}" href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
-        {% endfor %}
-        {% for mitem in site.menu %}
-            <li>
-                <a {% if mitem.class %}class="{{ mitem.class }}"{% endif %} href="{{ mitem.url }}"
-                    {% if mitem.class == 'external' %}target="_blank"{% endif %}>
-                    {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
-                    {{ mitem.text }}
-                </a>
-            </li>
-        {% endfor %}
-        </ul>
-    {% else %}
-        {{  parent() }}
-    {% endif %}
+    <script>
+    // singlePageNav initialization & configuration
+    $('ul.navigation').singlePageNav({
+        offset: $('#header').outerHeight(),
+        filter: ':not(.external)',
+        updateHash: true,
+        currentClass: 'active'
+    });
+    </script>
+
 {% endblock %}
 
 {% block hero %}
@@ -52,6 +29,7 @@
         <div id="{{ _self.pageLinkName(module.menu) }}"></div>
         {{ module.content }}
     {% endfor %}
+
 {% endblock %}
 
 {% block body %}
@@ -59,4 +37,5 @@
         <div id="{{ _self.pageLinkName(module.menu) }}"></div>
         {{ module.content }}
     {% endfor %}
+
 {% endblock %}

templates/partials/base.html.twig

@@ -106,6 +106,7 @@
 
 {% block bottom %}
     {{ assets.js('bottom') }}
+
 {% endblock %}
 
 </body>

templates/partials/navigation.html.twig

@@ -1,6 +1,9 @@
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
+
 {% macro nav_loop(page) %}
     {% for p in page.children.visible %}
         {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
+        {% set modules = p.collection() %}
         {% if p.children.visible.count > 0 %}
             <li>
                 <a href="{{ p.url }}" class="{{ active_page }}">
@@ -10,6 +13,22 @@
                     {{ _self.nav_loop(p) }}
                 </ul>
             </li>
+        {% elseif modules.count > 0 %}
+            <li>
+                <a href="{{ p.url }}" class="{{ active_page }}">
+                    {{ p.menu }}
+                </a>
+                <ul class="navigation">
+                {% for m in modules %}
+                    {% set current_module = (m.active or m.activeChild) ? 'active' : '' %}
+                    <li>
+                        <a href="{{ p.url }}#{{ _self.pageLinkName(m.menu) }}" class="{{ current_module }}">
+                            {{ m.menu }}
+                        </a>
+                    </li>
+                {% endfor %}
+                </ul>
+            </li>
         {% else %}
             <li>
                 <a href="{{ p.url }}" class="{{ active_page }}">