<nav class="n7-primary-navigation flex lg:justify-end" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn
n7-btn--only-text rounded-none lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="inline-block align-middle fill-current w-6 h-6 m-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--x-mark" />
</svg>
<span class="sr-only is-show-menu group-aria-expanded:hidden">
Menu
</span>
<span class="sr-only is-close-menu hidden group-aria-expanded:block">
Chiudi menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel flex-col bg-white max-lg:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed lg:static lg:visible top-[--header-height] bottom-0 max-lg:w-[90%] max-lg:max-w-[350px] overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main lg:border-b-0" id="mainNavListContainer">
<ul class="n7-primary-navigation__list flex max-lg:flex-col gap-6 lg:gap-4 lg:justify-end has-dropdown-menu">
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium visited:n7-content-01 n7-link--active">
Chi Siamo
</a>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId01">
Salute dell’Occhio<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId01">
<li class="n7-dropdown-menu__item group is-active">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 1</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 2</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 3</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 4</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
</ul>
</li>
<li class="n7-dropdown-menu n7-primary-navigation__item">
<button class="n7-dropdown-menu__trigger dropdown-trigger group w-full flex lg:flex-col items-center justify-between py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 aria-expanded:n7-content-primary lg:max-xl:leading-5" aria-expanded="false" aria-controls="submenuId02">
Ricerca e Innovazione<svg class="inline-block align-middle fill-current w-5 h-5 transition-all n7-dropdown-menu__trigger-icon group-aria-expanded:-rotate-180" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="n7-dropdown-menu__list hidden lg:absolute lg:pt-2 lg:pb-4 lg:px-4 lg:rounded-lg lg:shadow-xl bg-white lg:w-80" id="submenuId02">
<li class="n7-dropdown-menu__item group is-active">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 1</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 2</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 3</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
<li class="n7-dropdown-menu__item group">
<!-- RP 240416 Minisite user menu - changed classes -->
<a class="flex flex-col gap-6 transition text-sm lg:text-base group/clickarea group-first:rounded-t group-last:rounded-b n7-background-gray-01 mt-2 p-5" href="#">
<div class="flex gap-2 items-center n7-content-01 text-sm lg:text-base font-medium group-hover/clickarea:n7-link-primary-hover group-active/clickarea:text-primary-600 group-[.is-active]:n7-link-primary-hover">
<span class="grow">Item label 4</span>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 ml-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</div>
<div class="text-xs n7-content-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</a>
</li>
</ul>
</li>
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
<a href="#" class="n7-link flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01">
Prodotti
</a>
</li>
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
<nav class="n7-primary-navigation flex{% if classes %} {{ classes }}{% endif %}" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="n7-btn
n7-btn--only-text rounded-none lg:hidden ml-auto n7-btn--icon group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
{% render '@icon--small', { id: 'mini--bars-3', classes: 'm-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-show-menu group-aria-expanded:hidden', size: 'w-6 h-6' }, true %}
{% render '@icon--small', { id: 'mini--x-mark', classes: 'm-0 p-0 transition-all duration-200 ease-out transform group-hover:translate-none is-close-menu hidden group-aria-expanded:inline-block', size: 'w-6 h-6' }, true %}
<span class="sr-only is-show-menu group-aria-expanded:hidden">
Menu
</span>
<span class="sr-only is-close-menu hidden group-aria-expanded:block">
Chiudi menu
</span>
</button>
<!-- Mobile panel -->
<div class="n7-primary-navigation__panel flex-col bg-white max-lg:shadow-[-6px_0px_4px_-1px_rgba(0,0,0,0.06)] transition-all invisible py-6 px-4 fixed lg:static lg:visible top-[--header-height] bottom-0 max-lg:w-[90%] max-lg:max-w-[350px] overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="n7-primary-navigation__module is-main lg:border-b-0" id="mainNavListContainer">
<ul class="n7-primary-navigation__list flex max-lg:flex-col gap-6 lg:gap-4 lg:justify-end has-dropdown-menu">
{% for firstLevel in firstLevels %}
{% if firstLevel.hasSubItems %}
{% render '@dropdown-menu', { id: firstLevel.id, breakpoint: breakpoint, label: firstLevel.label, items: firstLevel.items, classes: 'n7-primary-navigation__item', listClasses: itemClasses, triggerFontSize:itemFontSize, dropdownItemFontSize: itemDropdownFontSize }, true %}
{% else %}
<li>
<!-- RP 240328 Primary nav fix - Changed classes -->
{% render '@link', { label: firstLevel.label, href: '#', classes: firstLevel.classes }, true %}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="n7-primary-navigation__backdrop bg-black/25 top-[--header-height] lg:hidden"></div>
</nav>
{
"navId": "mainNavPanel",
"classes": "lg:justify-end",
"mainHidden": false,
"minisiteHidden": true,
"breakpoint": "lg",
"firstLevels": [
{
"label": "Chi Siamo",
"classes": "flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium visited:n7-content-01 n7-link--active"
},
{
"label": "Salute dell’Occhio",
"hasSubItems": true,
"id": "submenuId01",
"items": [
{
"label": "Item label 1",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5",
"isActive": true
},
{
"label": "Item label 2",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5"
},
{
"label": "Item label 3",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5"
},
{
"label": "Item label 4",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5"
}
]
},
{
"label": "Ricerca e Innovazione",
"hasSubItems": true,
"id": "submenuId02",
"items": [
{
"label": "Item label 1",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5",
"isActive": true
},
{
"label": "Item label 2",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5"
},
{
"label": "Item label 3",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5"
},
{
"label": "Item label 4",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"iconRight": "mini--arrow-right",
"classes": "n7-background-gray-01 mt-2 p-5"
}
]
},
{
"label": "Prodotti",
"classes": "flex flex-col items-start lg:items-center py-3 lg:px-3 lg:pb-0 lg:pt-4 text-base font-medium n7-content-01 hover:n7-content-03 visited:n7-content-01"
}
]
}
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* Supplemental JS for the disclosure menu keyboard behavior
*/
'use strict';
// Helper function to find the closest ancestor with a specific tag name
function findAncestor(element, tagName) {
while (element) {
if (element.tagName.toLowerCase() === tagName) {
return element;
}
element = element.parentElement;
}
return null;
}
// function getButtonByControlledMenuId(id) {
// return this.topLevelNodes.find((button) => {
// const controlledMenuId = getControlledMenuId(button);
// return controlledMenuId === id;
// });
// }
class DisclosureNav {
constructor(domNode) {
this.rootNode = domNode;
this.controlledNodes = [];
this.openIndex = null;
this.useArrowKeys = true;
this.topLevelNodes = [
...this.rootNode.querySelectorAll(
'.main-link, .dropdown-trigger'
),
];
this.topLevelNodes.forEach((node) => {
// handle button + menu
if (
node.tagName.toLowerCase() === 'button' &&
node.hasAttribute('aria-controls')
) {
const menu = node.parentNode.querySelector('ul');
if (menu) {
// save ref controlled menu
this.controlledNodes.push(menu);
// collapse menus
node.setAttribute('aria-expanded', 'false');
this.toggleMenu(menu, false);
// attach event listeners
menu.addEventListener('keydown', this.onMenuKeyDown.bind(this));
node.addEventListener('click', this.onButtonClick.bind(this));
node.addEventListener('keydown', this.onButtonKeyDown.bind(this));
}
}
// handle links
else {
this.controlledNodes.push(null);
node.addEventListener('keydown', this.onLinkKeyDown.bind(this));
}
});
this.rootNode.addEventListener('focusout', this.onBlur.bind(this));
}
controlFocusByKey(keyboardEvent, nodeList, currentIndex) {
switch (keyboardEvent.key) {
case 'ArrowUp':
case 'ArrowLeft':
keyboardEvent.preventDefault();
if (currentIndex > -1) {
var prevIndex = Math.max(0, currentIndex - 1);
nodeList[prevIndex].focus();
}
break;
case 'ArrowDown':
case 'ArrowRight':
keyboardEvent.preventDefault();
if (currentIndex > -1) {
var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1);
nodeList[nextIndex].focus();
}
break;
case 'Home':
keyboardEvent.preventDefault();
nodeList[0].focus();
break;
case 'End':
keyboardEvent.preventDefault();
nodeList[nodeList.length - 1].focus();
break;
}
}
// public function to close open menu
close() {
this.toggleExpand(this.openIndex, false);
}
onBlur(event) {
var menuContainsFocus = this.rootNode.contains(event.relatedTarget);
if (!menuContainsFocus && this.openIndex !== null) {
this.toggleExpand(this.openIndex, false);
}
}
onButtonClick(event) {
var target = event.target;
// Check if the target is not a button but is a descendant of a button
if (target.tagName.toLowerCase() !== 'button') {
var buttonAncestor = findAncestor(target, 'button');
// If an ancestor button is found, trigger the click on that button
if (buttonAncestor) {
buttonAncestor.click();
return; // Stop further processing since the click is handled
}
}
var button = event.target;
var buttonIndex = this.topLevelNodes.indexOf(button);
var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
this.toggleExpand(buttonIndex, !buttonExpanded);
}
// getControlledMenuId(button) {
// return button.getAttribute('aria-controls');
// }
onButtonKeyDown(event) {
var targetButtonIndex = this.topLevelNodes.indexOf(document.activeElement);
// close on escape
if (event.key === 'Escape') {
this.toggleExpand(this.openIndex, false);
}
// move focus into the open menu if the current menu is open
else if (
this.useArrowKeys &&
this.openIndex === targetButtonIndex &&
event.key === 'ArrowDown'
) {
event.preventDefault();
this.controlledNodes[this.openIndex].querySelector('a').focus();
}
// handle arrow key navigation between top-level buttons, if set
else if (this.useArrowKeys) {
this.controlFocusByKey(event, this.topLevelNodes, targetButtonIndex);
}
}
onLinkKeyDown(event) {
var targetLinkIndex = this.topLevelNodes.indexOf(document.activeElement);
// handle arrow key navigation between top-level buttons, if set
if (this.useArrowKeys) {
this.controlFocusByKey(event, this.topLevelNodes, targetLinkIndex);
}
}
onMenuKeyDown(event) {
if (this.openIndex === null) {
return;
}
var menuLinks = Array.prototype.slice.call(
this.controlledNodes[this.openIndex].querySelectorAll('a')
);
var currentIndex = menuLinks.indexOf(document.activeElement);
// close on escape
if (event.key === 'Escape') {
this.topLevelNodes[this.openIndex].focus();
this.toggleExpand(this.openIndex, false);
}
// handle arrow key navigation within menu links, if set
else if (this.useArrowKeys) {
this.controlFocusByKey(event, menuLinks, currentIndex);
}
}
toggleExpand(index, expanded) {
// close open menu, if applicable
if (this.openIndex !== index) {
this.toggleExpand(this.openIndex, false);
}
// handle menu at called index
if (this.topLevelNodes[index]) {
this.openIndex = expanded ? index : null;
this.topLevelNodes[index].setAttribute('aria-expanded', expanded);
this.toggleMenu(this.controlledNodes[index], expanded);
}
}
toggleMenu(domNode, show) {
if (domNode) {
domNode.style.display = show ? 'block' : 'none';
// if (show) {
// Get the menu's position and dimensions
const rect = domNode.getBoundingClientRect();
// Check if the menu overflows on the right
const isOverflowingRight = rect.right > window.innerWidth;
// Check if the menu overflows on the left
const isOverflowingLeft = rect.left < 0;
// Add the appropriate class based on overflow
domNode.classList.toggle('right-0', isOverflowingRight);
domNode.classList.toggle('left-0', isOverflowingLeft);
// }
}
}
updateKeyControls(useArrowKeys) {
this.useArrowKeys = useArrowKeys;
}
}
/* Initialize Disclosure Menus */
window.addEventListener(
'load',
function () {
var menus = document.querySelectorAll('.has-dropdown-menu');
var disclosureMenus = [];
for (var i = 0; i < menus.length; i++) {
disclosureMenus[i] = new DisclosureNav(menus[i]);
}
},
false
);
Primary navigation uses dropdown menu component.
Replace classes ‘n7-content-01 hover:n7-content-03’ with ‘n7-link–active’ to current first level navigation item (see Chi siamo)
Add class is-active to current second level navigation item (see dropdown first ‘li’ element)