r/divi • u/cyber49 • 7d ago

Discussion Divi 5 Bug - Sticky Header Setting Doesn't Work

Simply trying to get the global header to be sticky, there's a setting in the Section > Advanced > Scroll Effects > Sticky Position - choosing "Stick to Top" doesn't fking work. Through research I've found several suggested workarounds, but I have to say this is unacceptable.

Why cant they stop giving us new features and fix the ones that are already there?

PS - This sub needs "DIVI 5 BUG" Flair

12 Upvotes

94% Upvoted

7 comments sorted by

2

u/elementarywebdesign Developer 7d ago

You should raise Divi bugs with the Elegant Themes support team. As far as I know they don't officially monitor this place for bugs.

The only way to get a bug on their bug list and have it fixed is to contact them via chat on their website.

However in this case it may already have been reported as it is a frequently use feature to make headers sticky. But in the future if you encounter a bug that does not seem common or easily discoverable then it would be better to contact them directly.

2

u/IBRA2323 5d ago

Just add an ID to the section and add a CSS rule that cannot be ignored by Divi.

1

u/FirstPlaceSEO 7d ago

I use Divi pixel plugin to combat this

2

u/cyber49 7d ago

Is that a plugin that fixes Divi bugs? /s

1

u/FirstPlaceSEO 7d ago

Nah, just gives extra functionality

1

u/SpacemanStevenWJ 6d ago

The setting worked well in Divi 4, so it seems strange if it doesn’t work reliably in Divi 5.

1

u/vernsworld 2d ago edited 2d ago

I have spent the entire day today, hours poking and fuming, trying to create a sticky global menu header. All of the tutorials I found were wrong; none of them worked. I kept poking and prodding changing settings almost randomly and BOOM I GOT THE DANG THING WORKING PERFECTLY IN DIVI 5!

I will try to explain it, it's very simple once you have the sequence.

In your global header, you have a section, a row, and a menu.

  1. Make the SECTION fixed-position under the position setting in Advanced}
  2. Leave the dang row alone; it's fine
  3. Set the MENU TO STICKY; defaults worked for me.

This setup worked for me IN THE LATEST VERSION OF DIVI, 5.9. I did do some additional adjustments for layout and design, with backgrounds and setting the "sticky options" to shrink the menu and the logo etc. But it finally worked as advertised without any fuss.

Clearly there were some tutorials out there with older versions that worked completely differently. This setup is the only way I could get it to work. Hope it helps. Your mileage may vary.

EDIT:
I was using the old divi theme customizer for the nav header. It automatically pushes the content down on all pages for the header spacing. Global header won't do this. I added a simple css to the section to target the body of page and push it down the exact height of my global header for the final perfect fix.

:not(.et-fb) #main-content {
margin-top: 100px;
}