Navigation

Navigation templates:

• nav_default_nature: main navigation
• nav_default_nature_aside: subpage navigation

Custom templates:

• mod_navigation_nature: main navigation
• mod_navigation_nature_aside: subpage navigation

Mega menu

To display a mega menu, select the template mod_navigation_nature_megamenu for the module type Navigation menu.

You can customize the mega menu with variables in _custom_variables.scss:

$megamenu-width: 100%; // Breite des Megamenü
$megamenu-right: 0px; // Abstand zum rechten Bildschirmrand
$megamenu-background-color: $boxes-background; // Hintergrundfarbe
$megamenu-background-color-home: $megamenu-background-color; // Hintergrundfarbe nur für die Startseite
$megamenu-item-width: 20%; // Breite der Spalten, z. B. 20% für 5 Spalten
$megamenu-padding: 20px 60px 5px 30px; // Innenabstand oben, rechts, unten, links
$megamenu-link-lvl2-color: #000; // Schriftfarbe Level 2
$megamenu-link-lvl2-color-hover: $primary; // Schriftfarbe Level 2 bei Mouse Hover
$megamenu-link-lvl3-color: #4a4a4a; // Schriftfarbe Level 3
$megamenu-link-lvl3-color-hover: $link-hover; // Schriftfarbe Level 3 bei Mouse Hover
$megamenu-border-color: $primary; // Rahmenfarbe

Further customization

How do I keep the mega menu open on hover?

Create a .js file, e.g. custom.js, with the following content. You can include the file in the page layout under External JavaScripts.

jQuery(document).ready(function($) {
  $('.megamenu .level_1 > .navbar-item').hover(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
    $(this).find('.navbar-dropdown.level_2').css('display', 'flex');
  });

  $('body').click(function() {
    $('.navbar-dropdown.level_2').css('display', 'none');
  });
});