In this tutorial, you will learn how to create an effect on your website using the free version of Elementor. The effect consists of reducing the height of the header and the size of the logo when scrolling, in addition to changing the background color of the header. To achieve this, we will follow the following steps:
Preparation
1.1. Make sure you have the free version of Elementor installed on your website. If you have the Pro version, you do not need to install any additional plugins.
1.2. Access the WordPress dashboard and go to “Appearance > Elementor Header and Footer”.
1.3. Click “Add New” and give your header a name. Make sure you select the option to have this header displayed on all parts of your website and visible to all users. Then, click “Publish.”
Design the Header
2.1. After publishing the header, click “Edit with Elementor”.
2.2. Adds a horizontally oriented container. You can customize this container based on your preferences, such as font thickness.
23. In the container, first place the logo of your website and then the menu.
2.4. Define a breakpoint for the mobile version if you wish.
2.5. Vertically align the container and select the content justification as “buffer space.”
Create the Transition
3.1. To create the transition, we will use JavaScript and CSS. Go to “Advanced Container” and assign a class, for example, “myheader” to the container.
3.2. Assign another class, such as "myimage", to the website logo.
3.3. To make the header stay fixed at the top when scrolling, go to “Motion Effects” and enable “Stick”. Set the value according to your needs.
Customize the Effect with Code
4.1. You must modify the background color and the height of the header before and after scrolling. For this, open the related code file.
4.2. In the code, look for line 6 to set the initial background color and line 19 for the background color after scrolling.
4.3. Lines 5 and 18 set the height of the header before and after scrolling. Adjust these values according to your preferences.
4.4. To modify the number of scroll pixels the effect is applied to, go to line 10 and adjust the value.
Test and Adjust
5.1. Refresh your page and check the effect created. The header should shrink, the logo change size and the background color adapt when scrolling.
Ending
Congratulations! You have successfully created a shrinking header and logo effect when scrolling with Elementor. Now you can customize it even more and adjust it to your design.
Always remember to save your changes and perform tests to make sure the effect works correctly on your website.
If this tutorial has been useful to you, don't forget to like, subscribe and activate notifications on the author's channel. Also, you can leave your doubts or questions in the comments and share the content on your social networks.
Until next time!
