Okay
  Public Ticket #4405247
Sticky header
Open

Comments

  • mervezoe started the conversation

    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

  •  994
    Neuron replied

    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


  • mervezoe replied

    Hello,

    Yes, please. I want the sticky menu to hide when scrolling and stay centered in the header area when it reappears.

    Thanks

  • mervezoe replied

    Hello, 

    It would be great if you could inform me about how to edit the background color of this sticky header. 

    Thanks

  • mervezoe replied

    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


  • mervezoe replied

    Hello, I'm still waiting for your response.

  • mervezoe replied

    Hello, I need your support to close this project.
    It would be great if you could check my tickets. 
    Thanks! 

  •  994
    Neuron replied

    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


  • mervezoe replied

    Thanks alot.

  •  994
    Neuron replied

    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