Elementor Header Change Color On Scroll Dynamically

Elementor Header Change Color On Scroll Dynamically

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

In this premium tutorial you are going to learn how to change the styling of the header dynamically, based on the class names of the sections / containers encountered while scrolling down the page.

In other words, we are going to create a whole new CSS styling for the header, and it will be enabled just when we are over sections with a specific class name.

Here is a rough version of what we are creating.

See a great example of what you can achieve with the same technique on this website (Not my work, just a random site I came across). My own example isn't styled well so not an awesome real world use case.

Features include:

  • Have a different logo image show for the alternate heading
  • Different color for the links from the Nav Menu element
  • Different color for the Nav Menu hamburger icon on mobile
  • Different background color for the heading section

Let's get started!

To start with, let's add this code to our website

This is a premium tutorial. Purchase access to unlock the full tutorial.

 

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

18 Responses

  1. Hi again Maxime!

    I've implemented this on a site and it works great. The only problem I'm having is when I tried creating a hamburger menu (which also works great) when I click on the hamburger it glitches and changes to the default header and doesn't turn back.

    I originally tried your tutorial: https://element.how/elementor-full-screen-split-navigation/

    It worked well but again, it glitched to the default header so changed colour on the wrong background.

    Then I tried using JetBlocks hamburger panel, same problem.

    https://ianf58.sg-host.com/

    Any ideas on how to make it not glitch like that?

    1. Hey Millie!

      Yes I see the problem indeed.

      Try this. Change this line:

      let observedElements = document.querySelectorAll('.elementor-section-wrap > *, .elementor > *:not(.elementor-section-wrap)');

      to

      let observedElements = document.querySelectorAll('.elementor-section-wrap > *, .elementor > *:not(.elementor-section-wrap, #navsection)');

  2. Also, I am using menu anchors to click through to the next section using the arrows at the bottom of each section. However, the sticky header seems to be confusing it and adds the header above where the menu anchor is so it appears high. Any idea of how I could resolve this?

    So grateful for all your help.

    1. The anchors offset is caused by this CSS I found active on your site :

      html, body {
      scroll-padding-top: 75px;
      }

      Not certain where exactly you added it though. Hopefully you will know!

      1. Hey Millie!

        I still see the CSS applied on the page... I'm not certain if it's really the cause of the problem or not, but first let's try to remove it.

      2. It's on that element:

        /* Start custom CSS for social-icons, class: .elementor-element-40595bd */

      3. Sorry! I forgot I put it in one more place when testing. I've removed it now. Has it gone?

      4. Yes now it has... the issue is still there. Could you please confirm that if you remove my custom code, the issue goes away? Just trying to confirm that it's related to my code, and not just an Elementor issue.

      5. Hi Maxime,

        The issue is still there, so I guess it is an issue with elementor?

        Out of interest, is adding 3 headings possible via the way in this tutorial?

        Thanks,
        Millie

      6. Hey Millie!

        Yes seems like an Elementor issue. You can still try to use the code from that tutorial here : https://element.how/elementor-scroll-offset-menu-anchors-table-content/

        Try this, in a code snippet :

        add_action( 'wp_footer', function() {
        if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
        return;
        }
        ?>
        <script>
        window.addEventListener('elementor/frontend/init', function() {
        elementorFrontend.hooks.addFilter( 'frontend/handlers/menu_anchor/scroll_top_distance', function( scrollTop ) {
        return scrollTop + 90;
        } );
        } );
        </script>
        <?php
        } );
        

        Yes, you can add as many headers as you want, it will work. Just keep this in mind: You should have only one container with the ID 'header-section'.

        So you would need to add all your different header containers IN that 'header-section' ID container. You will also need to rework the CSS to work as intended for each header container.

      7. Thank you. I've added the code snippet to a new snippet. I'm getting this error.

        The code snippet you are trying to save produced a fatal error on line 14:
        syntax error, unexpected end of file

        Thanks for all your help, sorry for being a pain!

      8. Oups really sorry about that. It didn't copy paste as expected.

        I updated my previous comment with the proper code, please try again.

      9. That has worked perfectly! You are a genius!

        Thank you so much for all your help!!

  3. Hi Maxime,

    I tried adding the HTML code to elementor >> custom code, but I got css errors in the root part of the code. Can you help me what am I doing wrong here?

    Thank you,
    Paveen

    1. Hey Paveen!

      Elementor is using an old CSS validator, and it's inaccurate. It will flag errors when there are none.

      The code works. If it's not working for you, maybe you added the PHP version in there? That one only works for with a php code snippet in the Code Snippet plugin. It won't work with Elementor custom code.

      Really, I suggest you use the first code snippet (php version), and add it in a code snippet from the Code Snippet plugin. That's ideal.

Leave a Reply