Comments mervezoe started the conversationAugust 20, 2025 at 2:04pmHello,Is there a way to make sticky header hide on scroll down and show again on scroll up? I don't have Elementor Pro.Thanks 994Neuron repliedSeptember 1, 2025 at 1:19pmHi, Sorry for the late reply, We can do it with some custom JavaScript code. Let me know if I can go ahead to implement it. Feel free to ask for anything you need. Kind Regardsmervezoe repliedSeptember 9, 2025 at 7:12pmHello,Yes, please. I want the sticky menu to hide when scrolling and stay centered in the header area when it reappears.Thanksmervezoe repliedSeptember 12, 2025 at 8:12amHello, It would be great if you could inform me about how to edit the background color of this sticky header. Thanksmervezoe repliedSeptember 17, 2025 at 5:51amHello, I tried to make the sticky header's background color match the page's background color. But it is still transparent. Could you please check it out?https://aydinteker.com/wp-admin mail; [email protected] password: jlayda!!0625WEB Thanksmervezoe repliedSeptember 21, 2025 at 10:37amHello, I'm still waiting for your response.mervezoe replied3 weeks ago on October 7, 2025 at 1:53pmHello, I need your support to close this project. It would be great if you could check my tickets. Thanks! 994Neuron replied3 weeks ago on October 8, 2025 at 2:03pmHi, I've just fixed it by adding the following JS and CSS code to your header template. <script> document.addEventListener('DOMContentLoaded', function () { const header = document.querySelector('.elementor-element-9862b3e'); const scrollClass = 'is-scrolled'; const stickyClass = 'is-sticky'; if (!header) return; // Make header sticky header.style.position = 'fixed'; header.style.top = '0'; header.style.left = '0'; header.style.width = '100%'; header.style.zIndex = '999'; // Add top margin to next section to prevent jump const nextEl = header.nextElementSibling; if (nextEl) { nextEl.style.marginTop = `${header.offsetHeight}px`; } window.addEventListener('scroll', function () { if (window.scrollY > 10) { header.classList.add(scrollClass, stickyClass); } else { header.classList.remove(scrollClass, stickyClass); } }); }); </script> .elementor-element-9862b3e { transition: background-color 0.3s ease, box-shadow 0.3s ease; } .elementor-element-9862b3e.is-scrolled { background-color: #ffffff; /* 👈 change to your preferred sticky color */ box-shadow: 0 2px 8px rgba(0,0,0,0.08); } Feel free to ask for anything you need. Kind Regardsmervezoe replied2 weeks ago on October 13, 2025 at 1:19pmThanks alot. 994Neuron replied2 weeks ago on October 13, 2025 at 1:30pmYou are welcome anytime, feel free to ask for anything you need If you like our theme or the support, please leave us a rate of 5 stars at ThemeForest, that would help us a lot. Kind Regards, NeuronThemes Sign in to reply ...
Hello,
Is there a way to make sticky header hide on scroll down and show again on scroll up? I don't have Elementor Pro.
Thanks
Hi,
Sorry for the late reply,
We can do it with some custom JavaScript code. Let me know if I can go ahead to implement it.
Feel free to ask for anything you need.
Kind Regards
Hello,
Yes, please. I want the sticky menu to hide when scrolling and stay centered in the header area when it reappears.
Thanks
Hello,
It would be great if you could inform me about how to edit the background color of this sticky header.
Thanks
Hello, I tried to make the sticky header's background color match the page's background color. But it is still transparent. Could you please check it out?
https://aydinteker.com/wp-admin
mail; [email protected]
password: jlayda!!0625WEB
Thanks
Hello, I'm still waiting for your response.
Hello, I need your support to close this project.
It would be great if you could check my tickets.
Thanks!
Hi,
I've just fixed it by adding the following JS and CSS code to your header template.
<script> document.addEventListener('DOMContentLoaded', function () { const header = document.querySelector('.elementor-element-9862b3e'); const scrollClass = 'is-scrolled'; const stickyClass = 'is-sticky'; if (!header) return; // Make header sticky header.style.position = 'fixed'; header.style.top = '0'; header.style.left = '0'; header.style.width = '100%'; header.style.zIndex = '999'; // Add top margin to next section to prevent jump const nextEl = header.nextElementSibling; if (nextEl) { nextEl.style.marginTop = `${header.offsetHeight}px`; } window.addEventListener('scroll', function () { if (window.scrollY > 10) { header.classList.add(scrollClass, stickyClass); } else { header.classList.remove(scrollClass, stickyClass); } }); }); </script>.elementor-element-9862b3e { transition: background-color 0.3s ease, box-shadow 0.3s ease; } .elementor-element-9862b3e.is-scrolled { background-color: #ffffff; /* 👈 change to your preferred sticky color */ box-shadow: 0 2px 8px rgba(0,0,0,0.08); }Feel free to ask for anything you need.
Kind Regards
Thanks alot.
You are welcome anytime, feel free to ask for anything you need
If you like our theme or the support, please leave us a rate of 5 stars at ThemeForest, that would help us a lot.
Kind Regards,
NeuronThemes