How To Make The Text Style Options Sticky Within The Divi Builder Module Text Areas Tutorial by Pee Aye Creative

How To Make The Text Style Options Sticky Within The Divi Builder Module Text Areas

In this tutorial you will learn how to make the Divi text style settings sticky when you scroll within any Divi Builder module text area.

Make All Divi Text Style Settings Sticky

This solution will apply to any module that has the text content area, such as the Text module, Blurb module, Person module, Testimonial module, etc. This works when the “Visual” tab is selected, and is great when styling text, adding links, making blockquotes, etc.

sticky Divi settings GIF min

I have a very simple CSS snippet that targets just the right items within the Divi Builder and makes it sticky when you scroll. It took me quite a long time to figure out which CSS selector to use, so I hope you appreciate it 🙂

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*make Divi Builder text style settings sticky on scroll*/

.mce-panel .mce-stack-layout-item.mce-first {
	position: sticky!important;
	top: -60px;
}

Be sure to watch the video to see the sticky effect demonstrated in a variety of different modules. If you think this is worth using on your websites, please let me know in the comments!

36
Last updated Apr 20, 2021 @ 3:59 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

21 Comments

  1. Mark Hancock

    A gem of a divihack. Thank you for this practical snipplet!

    Reply
  2. Patrick Hedgepath

    Thanks for this! Has been frustrating me for a long time. Never thought to look into a CSS solution for it. *smacks forehead*

    Reply
  3. Jacob

    This is definitely something Elegant Themes should add natively to Divi. Very useful.

    Reply
  4. Francis Malabanan

    Good Job! This worked for me for a short time and for some reason it is not sticking anymore, it was back to how it was. Not sure if I did something different.

    Reply
    • David Reid

      same here

      Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Francis,
      Try placing the CSS in the head and to do that please go to the functions.php of your Child Theme and place the code given below:

      add_action(‘wp_head’, ‘pa_sticky_panel’);

      function pa_sticky_panel() {
      echo ‘ /*Place the CSS given in this guide above here between the style tags*/ ‘;
      }

      This will solve the issue. Let us know if that helps.

      Reply
  5. Don

    Been waiting for this for a long time. Thank you very much!

    Reply
  6. David Reid

    This doesn’t seem to be working

    Reply
  7. Ian

    I’ve found it works if I enter it in Customise -> Additional css, but if I add it to my child theme css it doesn’t! No idea why (and no caching plugin in use)

    Reply
    • Hemant Gaba

      Directly if you place the CSS snippet in the Child Theme, it will not work. You need to place the CSS in the head and to do that please go to the functions.php of your Child Theme and place the code given below:

      add_action(‘wp_head’, ‘pa_sticky_panel’);

      function pa_sticky_panel() {
      echo ‘ /*Place the CSS given in this guide above here between the style tags*/ ‘;
      }

      This will solve the issue. Let us know if that helps. 🙂

      Reply
  8. Jeff

    Okay, not sure what I am doing wrong but I placed in custom CSS (Appearance – Customize), I tried it in Additional CSS under Divi Theme Options, and I tried it in style.css and none of these worked in either Divi or Extra. (I am NOT using a child theme on the Divi site in question, so that is not it, either). I made sure I turned of any plugins that may affect this (Tiny MCE, classic editor, etc.) still a no-go. But I’m guessing it’s a plugin conflict based on it working for some and not for others

    Reply
    • Hemant Gaba

      As I mentioned in my above comment, you need to place a PHP snippet inside the functions.php file of your child theme to get it to work. If you don’t want to use the child theme then you can place the code in the functions.php file of your main theme but then you have to place it again and again after every update which is not recommended.

      This is the PHP snippet: https://www.codepile.net/pile/RV2R67Vg

      Place the code and let me know if that helps. 🙂

      Reply
  9. Nicole

    I just updated to DiviVersion: 4.9.7 and am unable to get this to work? Is there any issues with the new versions of Divi? I feel certain that I have your awesome code in the correct place. Any other suggestions?

    Reply
    • Hemant Gaba

      I have commented on the solution of this issue above, please follow the steps present in the comment, and your issue will get resolved. 🙂

      Let us know how it goes.

      Reply
  10. Nicole

    I have placed your code in the Divi>Theme Options>Custom CSS code box on three different sites that are not using a child’s theme and have been unsuccessful at getting it to work on all three sites. Any suggestions?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Pin It on Pinterest

0

Your Cart