Skip to main content

Divi Community (FREE)

#Divi Related

Divi dynamic header question

I want to create a header that has the name of my company spelled out, but on scroll it transitions to just the initials of my company. I originally accomplished something similar with CSS, but the code was lost during a site crash. Ideas?

  • 3 comments

Mathias G

One approach would be to create two versions of your company name in the header:

  • The full company name.
  • A second version with just the initials.

Then use Divi's Sticky State to switch between them when the header becomes sticky. For example, show the full name in the default state and fade it out while fading in the initials on scroll. A small amount of CSS for the opacity transition is usually all that's needed.

If you're using KrafterPRO, you can also use its presets and variables to keep both versions styled consistently.

I actually think this is a pretty clean solution since you're simply swapping between two elements rather than trying to change the text itself.

Jennifer A.

Mathias G You beat me to the response! You worded it better than I could. :)

Kim Waag

Thanks, Mathias. I'll give it a try.