xarxaprod
/
xarxaprod-wp-theme
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

navigation js breaks apart navigation logic in small screens

This commit is contained in:
jorge 2024-03-14 20:27:09 +01:00
parent 7d25caa7f5
commit 5b1262e01b
2 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/navigation.js
View File

@ -64,10 +64,18 @@
link.addEventListener( 'blur', toggleFocus, true ); link.addEventListener( 'blur', toggleFocus, true );
} }
//
// DO NOT ACTIVATE IT
// if so it will not focus thus work when link has sub elements
//
//
// Toggle focus each time a menu link with children receive a touch event. // Toggle focus each time a menu link with children receive a touch event.
for ( const link of linksWithChildren ) { //
link.addEventListener( 'touchstart', toggleFocus, false ); //for ( const link of linksWithChildren ) {
} // link.addEventListener( 'touchstart', toggleFocus, false );
//}
//
/** /**
* Sets or removes .focus class on an element. * Sets or removes .focus class on an element.

27
sass/components/navigation/_navigation.scss
View File

@ -17,7 +17,7 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
.sub-menu { ul.sub-menu {
padding-top: 0.5rem; padding-top: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
} }
@ -26,32 +26,19 @@
position: relative; position: relative;
} }
a { a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none; text-decoration: none;
font-size: 1rem; font-size: 1rem;
} }
} }
.main-navigation { .main-navigation {
&.toggled { &.toggled {
ul { ul {
display: block; display: block;
margin:0;
padding:0;
.sub-menu {
padding: 0.5em;
a {
}
}
} }
li {
padding: 0;
}
a {
margin:0;
padding: 0.5em;
display: block;
}
.main-navigation-content { .main-navigation-content {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -151,11 +138,11 @@
} }
.main-navigation-content { .main-navigation-content {
li { li {
//padding: 0.5rem 0; padding: 0.5rem 0;
} }
} }
.secondary-navigation-content { .secondary-navigation-content {
//padding: 4rem 2rem; padding: 4rem 2rem;
} }
} }
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {