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

Nelson Miller Pee Aye Creative
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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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 🙂

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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;
}
.et-fb-modal--expanded .mce-panel .mce-stack-layout-item.mce-first{
    top: -24px!important;
}

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!

How to Make The Text Editor Toolbar Sticky Within Module Textareas using the Divi Assistant plugin

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

26 Comments

  1. 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
  2. Jacob

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

    Reply
  3. 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) <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      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
  4. David Reid

    This doesn’t seem to be working

    Reply
  5. 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
  6. 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
      • Ian B

        I used the Code Snippets plugin to add the code rather than add it to the functions.php file.

  7. 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
  8. 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
  9. Ryk Brown

    THIS!!!! I wish I’d found this post months ago! This simple (not so simple) bit of CSS is going to save me hours in tedious editing!!! My work involves a LOT of nested lists with varying indents and outdents. It takes me SO LONG to enter text because I have to keep highlighting the paragraph then scrolling back up to the top of the text box to select number list, or bullet list, or indent, or outdent, then scroll back down to select the next paragraph then do it again. NO MORE SCROLLING!!!! THANK YOU!!!! I’ve linked an example below. Just give a quick scroll over my example page and imagine how much faster it would have gone entering that data with your fix! Woohoo!!!
    https://stewartsofbalquhidder.com/research-resources/stewarts-of-the-south-introduction/stewarts-of-the-south-section-ii-glenbuckie/

    Reply
    • Hemant Gaba

      Hey Ryk,

      I am really glad that our guide helped you cut down your workload a little. 🙂

      Reply
  10. Web Consultant Geek

    Hi there,

    This is awesome, but having an issue.

    I am using a child theme and placed the code in my functions.php file. On normal pages, it sticks as supposed to, but in the theme builder while creating a header, it does not stick.

    Do you perhaps have any suggestions?

    Regards,

    Ryan

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart