Hello!
I used the code from above to divide my page into 2 areas. In area1 (pass=schnufe) all nav items from area2 are hidden (and the other way around).
My Code for area2 (pass=schnufe) looks like this - inserted with PAGE HEADER CODE INJECTION:
<style>
/* desktop hide nav items */
.header-nav-item:nth-of-type( 1 ),
.header-nav-item:nth-of-type( 2 ),
.header-nav-item:nth-of-type( 3 ),
.header-nav-item:nth-of-type( 4 ),
/* mobile hide nav items */
.header-menu-nav-item:nth-of-type( 1 ),
.header-menu-nav-item:nth-of-type( 2 ),
.header-menu-nav-item:nth-of-type( 3 ),
.header-menu-nav-item:nth-of-type( 4 )
{
display: none;
}
</style>
On desktop it works perfectly.
On mobile though in area2 the 4 first submenus (items that are nested in the folder "Angebot") are hidden too including the "back" item. See attached screenshot.
Is there any way to only hide main nav items but still display all submenu items?
I've read above that "a little jQuery could help us target links by their href attributes". Maybe this would be a better way? Unfortunately i don't know jQuery at all.
Help is very much appreciated. Thank you!