Divi Hacks Plugin
Examples & DocumentationSticky Element
Classes
- sticky-section
- sticky-row
- sticky-column
- sticky-module
Usage
**Note: These 4 classes are not available in the Divi Hacks Lite plugin**
These classes remain stuck in it’s parent container, and then will becoming unstuck when it reaches the end of it’s parent container.
Add sticky-section to the Section’s Settings > Advanced tab > CSS ID & Classes > CSS Classes
Add sticky-row to the Row’s Settings > Advanced tab > CSS ID & Classes > CSS Classes
Add sticky-column to the Row’s Settings > Advanced tab > CSS ID & Classes > Column CSS Classes
Add sticky-module to the Module’s Settings > Advanced tab > CSS ID & Classes > CSS Classes
**You can set the top offset of these sticky elements on both desktop and mobile devices in the Theme Customizer.**
Classes
- sticky-element
USAGE
Use the class sticky-element if you want the element to automatically remain stuck to the bottom of the header, even when the header height changes.
An element with this class remains stuck to the bottom of the header while scrolling down the page, regardless of its parent container.
Add sticky-element to the Section, Row, Column, or Module’s Settings > Advanced tab > CSS ID & Classes > CSS Classes
**The offset for this sticky element is automatically calculated from the combined height of the main header and secondary header**
You can see an example of this hack with the full-width menu on this page.
Classes
- sticky-header
USAGE
Use the class sticky-header inside the Theme Builder if you want to create a header that becoming fixed to the top of the window when scrolling down the page.
An element with this class remains stuck to the top of the page while scrolling down, regardless of its parent container.
Add sticky-header to the Section, Row, or Module’s Settings > Advanced tab > CSS ID & Classes > CSS Classes.
Classes
- disable-phone
disable-tablet
disable-mobile
disable-desktop
USAGE
Use these classes to disable the “sticky-ness” on different devices.
Add these classes to the Section, Row, Column, or Module’s Settings > Advanced tab > CSS ID & Classes > CSS Classes.
Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl pretium fusce id velit ut tortor pretium viverra. Sit amet porttitor eget dolor. Commodo sed egestas egestas fringilla phasellus. Eget dolor morbi non arcu risus quis. In hendrerit gravida rutrum quisque non tellus. Dictum sit amet justo donec enim diam vulputate ut pharetra. Donec enim diam vulputate ut pharetra sit. Donec massa sapien faucibus et. Ut faucibus pulvinar elementum integer. Elementum nibh tellus molestie nunc non blandit. Auctor eu augue ut lectus arcu bibendum at. Aliquet eget sit amet tellus. Nulla porttitor massa id neque aliquam vestibulum morbi blandit. Pulvinar sapien et ligula ullamcorper malesuada proin.
Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Aliquet eget sit amet tellus cras adipiscing enim eu. In nulla posuere sollicitudin aliquam ultrices sagittis. Suspendisse faucibus interdum posuere lorem ipsum. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Semper eget duis at tellus at urna condimentum. Volutpat odio facilisis mauris sit. Id semper risus in hendrerit gravida. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Neque viverra justo nec ultrices. Non consectetur a erat nam at lectus urna. Purus viverra accumsan in nisl. Ac turpis egestas sed tempus urna et pharetra pharetra massa. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. Non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Risus in hendrerit gravida rutrum quisque. Est sit amet facilisis magna etiam tempor orci. Feugiat vivamus at augue eget arcu. Quis imperdiet massa tincidunt nunc pulvinar. Enim sit amet venenatis urna.
Aliquam sem et tortor consequat id porta. Turpis in eu mi bibendum. Duis ut diam quam nulla porttitor massa id. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Sit amet tellus cras adipiscing enim eu turpis egestas. Ac orci phasellus egestas tellus. Massa eget egestas purus viverra. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Gravida rutrum quisque non tellus orci ac. Orci ac auctor augue mauris. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Suscipit tellus mauris a diam maecenas sed enim ut. Elementum eu facilisis sed odio. Habitasse platea dictumst quisque sagittis purus sit amet volutpat. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet est placerat in egestas erat imperdiet. Tincidunt augue interdum velit euismod.
Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Suspendisse in est ante in. Cursus euismod quis viverra nibh cras. Elit duis tristique sollicitudin nibh. Vitae purus faucibus ornare suspendisse sed. Vestibulum sed arcu non odio euismod lacinia at quis. Vel pretium lectus quam id leo in. Convallis aenean et tortor at risus viverra adipiscing at in. Accumsan tortor posuere ac ut consequat semper viverra nam. In aliquam sem fringilla ut morbi tincidunt augue interdum. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Dis parturient montes nascetur ridiculus mus mauris vitae. A arcu cursus vitae congue mauris rhoncus. Sed augue lacus viverra vitae congue eu consequat.
Ullamcorper malesuada proin libero nunc consequat. Dignissim suspendisse in est ante in. Elit scelerisque mauris pellentesque pulvinar. Tortor consequat id porta nibh venenatis cras sed. Est pellentesque elit ullamcorper dignissim cras tincidunt. Ac turpis egestas sed tempus. Mauris cursus mattis molestie a iaculis at erat. Id ornare arcu odio ut sem nulla pharetra diam sit. Proin fermentum leo vel orci. Urna cursus eget nunc scelerisque viverra mauris. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Habitasse platea dictumst quisque sagittis purus sit amet volutpat. Nunc consequat interdum varius sit amet mattis vulputate enim. Consectetur libero id faucibus nisl tincidunt eget nullam non. Pellentesque massa placerat duis ultricies lacus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Felis eget nunc lobortis mattis aliquam faucibus purus in.
At varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Dis parturient montes nascetur ridiculus. Venenatis a condimentum vitae sapien. Nisi vitae suscipit tellus mauris a. Non arcu risus quis varius quam. Sed felis eget velit aliquet sagittis id. Turpis egestas integer eget aliquet nibh praesent tristique magna. Aliquam sem et tortor consequat. Feugiat scelerisque varius morbi enim. Sed viverra tellus in hac habitasse. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Porta non pulvinar neque laoreet suspendisse interdum. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Fringilla urna porttitor rhoncus dolor purus non enim praesent. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Porttitor leo a diam sollicitudin tempor id eu. Id neque aliquam vestibulum morbi blandit cursus risus at.
Sed sed risus pretium quam. Tristique senectus et netus et malesuada fames ac. Etiam erat velit scelerisque in dictum. Vulputate enim nulla aliquet porttitor lacus. Ultricies lacus sed turpis tincidunt id aliquet risus. Cursus turpis massa tincidunt dui ut ornare. Vel eros donec ac odio tempor. Non sodales neque sodales ut etiam sit. Placerat duis ultricies lacus sed turpis tincidunt. Porta lorem mollis aliquam ut porttitor leo a diam. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Lorem dolor sed viverra ipsum. Proin nibh nisl condimentum id venenatis a condimentum vitae.
Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Facilisi cras fermentum odio eu feugiat pretium nibh. Lacinia at quis risus sed vulputate odio. Interdum velit euismod in pellentesque massa placerat. Scelerisque felis imperdiet proin fermentum leo. Odio ut sem nulla pharetra diam sit. Ipsum dolor sit amet consectetur adipiscing. Pretium quam vulputate dignissim suspendisse in est ante. Non blandit massa enim nec. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Viverra vitae congue eu consequat ac. Vestibulum mattis ullamcorper velit sed ullamcorper. Amet cursus sit amet dictum sit. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Nibh sit amet commodo nulla. Amet mattis vulputate enim nulla. Tincidunt arcu non sodales neque sodales ut.
Facilisis leo vel fringilla est. Nibh tellus molestie nunc non blandit. Erat velit scelerisque in dictum non consectetur. Auctor eu augue ut lectus. Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Sed egestas egestas fringilla phasellus faucibus scelerisque. Justo laoreet sit amet cursus sit amet dictum. Mauris in aliquam sem fringilla ut morbi tincidunt augue. A lacus vestibulum sed arcu non odio euismod lacinia at. Lectus arcu bibendum at varius vel.
Commodo elit at imperdiet dui accumsan. Neque viverra justo nec ultrices dui sapien eget mi proin. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Eget velit aliquet sagittis id consectetur purus ut faucibus. Pellentesque dignissim enim sit amet venenatis urna cursus. Ullamcorper malesuada proin libero nunc consequat interdum. Semper quis lectus nulla at volutpat diam ut. Tellus id interdum velit laoreet. Scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis. Proin libero nunc consequat interdum. Varius sit amet mattis vulputate enim.
Turpis nunc eget lorem dolor sed viverra ipsum nunc. Mauris pellentesque pulvinar pellentesque habitant. Arcu non odio euismod lacinia at. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Magna fermentum iaculis eu non diam phasellus. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Id semper risus in hendrerit gravida rutrum quisque non. A pellentesque sit amet porttitor eget dolor morbi. Auctor urna nunc id cursus metus aliquam eleifend. Suspendisse sed nisi lacus sed viverra. Fermentum odio eu feugiat pretium nibh ipsum. Tempor commodo ullamcorper a lacus. Eget sit amet tellus cras. Aliquam ultrices sagittis orci a.
Id leo in vitae turpis massa sed. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Ut tortor pretium viverra suspendisse potenti nullam. Curabitur gravida arcu ac tortor dignissim. Lectus urna duis convallis convallis tellus id interdum. Ac turpis egestas integer eget aliquet nibh. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Amet nisl suscipit adipiscing bibendum est ultricies integer. Iaculis eu non diam phasellus vestibulum lorem sed. Interdum varius sit amet mattis. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Volutpat blandit aliquam etiam erat velit scelerisque in dictum. Dignissim enim sit amet venenatis urna cursus. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id diam maecenas ultricies mi eget mauris pharetra et. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Ac felis donec et odio pellentesque diam volutpat commodo sed.
sticky-module
Volutpat odio facilisis mauris sit. Id semper risus in hendrerit gravida. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Neque viverra justo nec ultrices. Non consectetur a erat nam at lectus urna. Purus viverra accumsan in nisl.
sticky-section
sticky-column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl pretium fusce id velit ut tortor pretium viverra. Sit amet porttitor eget dolor. Commodo sed egestas egestas fringilla phasellus. Eget dolor morbi non arcu risus quis. In hendrerit gravida rutrum quisque non tellus. Dictum sit amet justo donec enim diam vulputate ut pharetra. Donec enim diam vulputate ut pharetra sit. Donec massa sapien faucibus et. Ut faucibus pulvinar elementum integer. Elementum nibh tellus molestie nunc non blandit. Auctor eu augue ut lectus arcu bibendum at. Aliquet eget sit amet tellus. Nulla porttitor massa id neque aliquam vestibulum morbi blandit. Pulvinar sapien et ligula ullamcorper malesuada proin.
Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Aliquet eget sit amet tellus cras adipiscing enim eu. In nulla posuere sollicitudin aliquam ultrices sagittis. Suspendisse faucibus interdum posuere lorem ipsum. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Semper eget duis at tellus at urna condimentum. Volutpat odio facilisis mauris sit. Id semper risus in hendrerit gravida. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Neque viverra justo nec ultrices. Non consectetur a erat nam at lectus urna. Purus viverra accumsan in nisl. Ac turpis egestas sed tempus urna et pharetra pharetra massa. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. Non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Risus in hendrerit gravida rutrum quisque. Est sit amet facilisis magna etiam tempor orci. Feugiat vivamus at augue eget arcu. Quis imperdiet massa tincidunt nunc pulvinar. Enim sit amet venenatis urna.
Aliquam sem et tortor consequat id porta. Turpis in eu mi bibendum. Duis ut diam quam nulla porttitor massa id. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Sit amet tellus cras adipiscing enim eu turpis egestas. Ac orci phasellus egestas tellus. Massa eget egestas purus viverra. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Gravida rutrum quisque non tellus orci ac. Orci ac auctor augue mauris. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Suscipit tellus mauris a diam maecenas sed enim ut. Elementum eu facilisis sed odio. Habitasse platea dictumst quisque sagittis purus sit amet volutpat. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Sit amet est placerat in egestas erat imperdiet. Tincidunt augue interdum velit euismod.
Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Suspendisse in est ante in. Cursus euismod quis viverra nibh cras. Elit duis tristique sollicitudin nibh. Vitae purus faucibus ornare suspendisse sed. Vestibulum sed arcu non odio euismod lacinia at quis. Vel pretium lectus quam id leo in. Convallis aenean et tortor at risus viverra adipiscing at in. Accumsan tortor posuere ac ut consequat semper viverra nam. In aliquam sem fringilla ut morbi tincidunt augue interdum. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Dis parturient montes nascetur ridiculus mus mauris vitae. A arcu cursus vitae congue mauris rhoncus. Sed augue lacus viverra vitae congue eu consequat.
Ullamcorper malesuada proin libero nunc consequat. Dignissim suspendisse in est ante in. Elit scelerisque mauris pellentesque pulvinar. Tortor consequat id porta nibh venenatis cras sed. Est pellentesque elit ullamcorper dignissim cras tincidunt. Ac turpis egestas sed tempus. Mauris cursus mattis molestie a iaculis at erat. Id ornare arcu odio ut sem nulla pharetra diam sit. Proin fermentum leo vel orci. Urna cursus eget nunc scelerisque viverra mauris. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Habitasse platea dictumst quisque sagittis purus sit amet volutpat. Nunc consequat interdum varius sit amet mattis vulputate enim. Consectetur libero id faucibus nisl tincidunt eget nullam non. Pellentesque massa placerat duis ultricies lacus. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Felis eget nunc lobortis mattis aliquam faucibus purus in.
At varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Dis parturient montes nascetur ridiculus. Venenatis a condimentum vitae sapien. Nisi vitae suscipit tellus mauris a. Non arcu risus quis varius quam. Sed felis eget velit aliquet sagittis id. Turpis egestas integer eget aliquet nibh praesent tristique magna. Aliquam sem et tortor consequat. Feugiat scelerisque varius morbi enim. Sed viverra tellus in hac habitasse. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Porta non pulvinar neque laoreet suspendisse interdum. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Fringilla urna porttitor rhoncus dolor purus non enim praesent. Ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Porttitor leo a diam sollicitudin tempor id eu. Id neque aliquam vestibulum morbi blandit cursus risus at.
Sed sed risus pretium quam. Tristique senectus et netus et malesuada fames ac. Etiam erat velit scelerisque in dictum. Vulputate enim nulla aliquet porttitor lacus. Ultricies lacus sed turpis tincidunt id aliquet risus. Cursus turpis massa tincidunt dui ut ornare. Vel eros donec ac odio tempor. Non sodales neque sodales ut etiam sit. Placerat duis ultricies lacus sed turpis tincidunt. Porta lorem mollis aliquam ut porttitor leo a diam. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Lorem dolor sed viverra ipsum. Proin nibh nisl condimentum id venenatis a condimentum vitae.
Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Facilisi cras fermentum odio eu feugiat pretium nibh. Lacinia at quis risus sed vulputate odio. Interdum velit euismod in pellentesque massa placerat. Scelerisque felis imperdiet proin fermentum leo. Odio ut sem nulla pharetra diam sit. Ipsum dolor sit amet consectetur adipiscing. Pretium quam vulputate dignissim suspendisse in est ante. Non blandit massa enim nec. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Viverra vitae congue eu consequat ac. Vestibulum mattis ullamcorper velit sed ullamcorper. Amet cursus sit amet dictum sit. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Nibh sit amet commodo nulla. Amet mattis vulputate enim nulla. Tincidunt arcu non sodales neque sodales ut.
Facilisis leo vel fringilla est. Nibh tellus molestie nunc non blandit. Erat velit scelerisque in dictum non consectetur. Auctor eu augue ut lectus. Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Sed egestas egestas fringilla phasellus faucibus scelerisque. Justo laoreet sit amet cursus sit amet dictum. Mauris in aliquam sem fringilla ut morbi tincidunt augue. A lacus vestibulum sed arcu non odio euismod lacinia at. Lectus arcu bibendum at varius vel.
Commodo elit at imperdiet dui accumsan. Neque viverra justo nec ultrices dui sapien eget mi proin. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Eget velit aliquet sagittis id consectetur purus ut faucibus. Pellentesque dignissim enim sit amet venenatis urna cursus. Ullamcorper malesuada proin libero nunc consequat interdum. Semper quis lectus nulla at volutpat diam ut. Tellus id interdum velit laoreet. Scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis. Proin libero nunc consequat interdum. Varius sit amet mattis vulputate enim.
Turpis nunc eget lorem dolor sed viverra ipsum nunc. Mauris pellentesque pulvinar pellentesque habitant. Arcu non odio euismod lacinia at. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Magna fermentum iaculis eu non diam phasellus. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Id semper risus in hendrerit gravida rutrum quisque non. A pellentesque sit amet porttitor eget dolor morbi. Auctor urna nunc id cursus metus aliquam eleifend. Suspendisse sed nisi lacus sed viverra. Fermentum odio eu feugiat pretium nibh ipsum. Tempor commodo ullamcorper a lacus. Eget sit amet tellus cras. Aliquam ultrices sagittis orci a.
Id leo in vitae turpis massa sed. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Ut tortor pretium viverra suspendisse potenti nullam. Curabitur gravida arcu ac tortor dignissim. Lectus urna duis convallis convallis tellus id interdum. Ac turpis egestas integer eget aliquet nibh. Enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Amet nisl suscipit adipiscing bibendum est ultricies integer. Iaculis eu non diam phasellus vestibulum lorem sed. Interdum varius sit amet mattis. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Volutpat blandit aliquam etiam erat velit scelerisque in dictum. Dignissim enim sit amet venenatis urna cursus. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id diam maecenas ultricies mi eget mauris pharetra et. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Ac felis donec et odio pellentesque diam volutpat commodo sed.