Archived topic
How to make primary header and secondary navigation sticky in the aroma layout
5 replies · Started by Darren on September 27, 2021
Hi, is there anyways of making the secondary navigation sticky as well as the logo in the aroma theme. If I turn on the Sticky Navigation on the customizer, it only makes the logo, shopping icon and social icons sticky. Can I also make the menu items (Home, Shop, Products, About) sticky? I am struggling to find an option for this. Many thanks.
Hi there,
Just to confirm, are you hoping to make the screen part here sticky?
https://www.screencast.com/t/Wl2xhavvUIf
I feel like that would take up a lot of space.
Let me know :)
Hi Leo, yes that is correct. At the moment, when you make it sticky it goes half the height, so I think if that still happens, there would be room for the menu items without taking up to much space.
Cheers.
Hi there,
this isn't going to look to pretty, as the primary sticky nav uses JS to stick and theres a transition to deal with.
You will need to disable any transition affects and make sure its not set to hide on scroll down. And then try this CSS:
@media(min-width: 769px) {
.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 48px;
}
}Perfect! It works, thank you :)
You're welcome
