Divi Theme Header And Logo Color Change On Scroll 👈👍👈👍

preview_player
Показать описание
Divi Theme Header And Logo Color Change On Scroll. We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.
Today we will be demonstrating how to create a color change effect on our Divi Global Header and Logo on scroll. This is a great effect to have on your website. We are going to make our Menu and Logo sticky. Once done we will then apply some filters and color changes to effect both the logo and the menu items, so they will stand out better on our new header background.
There are no extra plugins or coding involved in this today. We are building this just using the inbuilt scroll frwatures of the Divi theme itself.
So, follow along with the video and check out how to create a color change effect on our Header and Logo on scroll, using the great Divi theme.
For more information on the Divi theme, check out our Divi playlists below.

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

---------- RECOMMENDED PLAYLISTS ----------

---------- RECOMMENDED VIDEOS: ----------

---------- SOCIAL MEDIA ----------
Follow what I'm doing on:

#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite
Рекомендации по теме
Комментарии
Автор

THANK YOU SO MUCH!!! 🙌🙌🙌 The moment you showed how to adjust the HUE for the inverted logo was a game-changer. 🤯 I have spent too much time on this website's header and hero section for the home page and, thanks to your video, I can now move on to creating the rest of the website. 😅

jiliennehart-arth
Автор

I am using Divi 4.18.1. I was unable to make this work at first, because I didn't get a sticky "pin" for the background color on the section, although I had defined the section as sticky. My work-around was to make the row fit perfectly in the section, edge to edge, and top to bottom, then add the sticky color to the row. This has some quirks when scrolling, but it works. Not sure why Elegant themes removed the sticky pin (shown in the video) from background color in the section. I also had to give my menu module -20px margin, 0 padding on top.

arlenes
Автор

I'd like the header to be transparent at first, then turn it to white (os any solid color) upon scroll. Can't seem to get it to work using this method.

SlyeJoySerrano
Автор

Is it possible with html css or JavaScript coding

nabeehkk
Автор

One big question: how to make the header sticky?

czaras_