Archived topic
Sticky Secondary Navigation hiding on scroll
3 replies · Started by Szymon on April 1, 2022
Hello,
I can't make sticky secondary navigation hiding on scroll.
1. to make it sticky i used a css code provided by you:
.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 60px;
}The main problem is to hide it on scroll as the primary menu does.
I tried alternative solution like removing secondary menu then adding it inside the primary menu block with code below, but it looks improperly
add_action( 'wp', function() {
remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
add_action( 'generate_after_primary_menu', 'generate_add_secondary_navigation_after_header', 8 );
} );Hi there,
Unfortuanly secondary navigation doesn't have the sticky option.
I would recommend to try using the navigation as header option at customizer > header with the PHP snippet you are using.
Then add this CSS:
nav#secondary-navigation {
width: 100%;
}Unfortunately it doesn't work for me.
I tried make secondary nav sticky with css:
.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 59px;
transition: top 0.3s;
}
@media only screen and (max-width: 768px){
.secondary-navigation {
top: 110px;
}
}and it works. Hiding on scroll was needed so i simply added a javascript:
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("secondary-navigation").style.top = null;
} else {
document.getElementById("secondary-navigation").style.top = "-40px";
}
prevScrollpos = currentScrollPos;
}
</script>so it works a little bit tricky and it would be acceptable if not an extra problem i cannot solve ;(
It works fine on desktop and tablet.
Problem is on smallest devices...
When cart is empty everything looks fine, but when i add a product the added item's value appears next to the cart icon. It takes more space causing breaking it to the new line then secondary menu covers buttons underneath.
Any idea how to improve the code or maybe another solution?
Much thanks for any help <3
Empty cart secondary nav sticky:
Filled with some product cart secondary nav sticky:
Hi there,
you can try reducing the menu font-size, and the menu item width on mobile to see if you can keep all items on the same line.
