How do I fix the Divi Text Module toolbar?

When you use Divi's Text module with multiple paragraphs, the toolbar slides with your text. So if you need to change text styles - add bold, italics, or a simple link - you have to highlight the text, scroll to the top to find the toolbar, and then scroll back down. In this article, I'll give you a quick trick to fix this toolbar so that it remains consistently accessible (on scroll), no matter how long your text is.

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is the "toolbar" of the Text module?

Finally, we find here the options that the classic WordPress editor offered, before the appearance of Gutenberg.

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 - Why fix this toolbar? (+ video)

As you can see in the video, this action is simple to perform, but it doesn't add anything in terms of design for your site or your client's site. Indeed, but fixing this toolbar will bring you great comfort when creating your content with the Divi Visual Builder. Basically, you gain in efficiency and productivity!

If the video does not work, here is the link.

Don't delay! Discover the Divi theme here !

3 - CSS snippet for a "sticky scroll" toolbar

When you need to modify an element of your site with CSS, your browser is your best ally. Simply use the "inspect element " feature to find an existing CSS Class and then modify it...

In this screenshot, I used my browser's inspector to find the element I wanted to change. When it is highlighted, I click on it and at the bottom of the browser, the corresponding HTML code is highlighted in blue. I then find 4 classes in use including the "mce-top-part.

Once this has been identified, all that remains is to create the appropriate CSS snippet to attach the toolbar. Here it is:

/* toolbar sticky au scroll */
.mce-top-part {
	position: sticky !important;
	top: -60px;
}

Copy and paste this code in the field dedicated to the Divi > Theme option > Customise CSS.

Note that this code will act on all Divi modules that use a text box, which is almost all modules!

Reminder: there are other ways to add code to Divi. Discover also my library of Snippets for Divi !

4 - Sticky or fixed position?

To fix an element in a web page, the most effective property is the "Position" property. But the question you may be asking yourself is: why use the Sticky instead of the value Fixed ?

The Sticky value allows the element to remain fixed within its container (its parent element), while the Fixed value remains fixed relative to the browser window.

In this case, if you use the value Fixed instead of Stickyyou will see that the behaviour of the toolbar is not at all what we expected.

To better understand, scroll down below:

Need to master Divi? Discover my training which will guide you step by step in the understanding and use of Divi! Learn more about Divi training.

5 - Compatibility with the back-office builder

This chapter was added after the initial publication of the article only a few hours ago. Indeed, some of you have pointed out to me that the CSS code I give in this article in chapter 3 does not "work"...

I assure you, it works... but only if you use the Visual Builder in the front-office. For those who use the Divi Builder in the back-office, the code doesn't work... And I found out why!

So here are some details:

5.1 - If you are using the old version of Divi Builder

In my opinion this is a very bad idea... If in the Divi tab > Theme Options > Creator > Advanced, you have activated the "classic editor" option, then you are using the old version of Divi which has stopped evolving since 2018...

By the way, if you use this version, there is a good chance that your back-office edition will be as slow as ever, it's slow, it's slow!

Anyway, if you prefer to keep this configuration, here is what you need to do to fix the Divi Text Module toolbar:

1. If in the Divi > Theme Options > Creator > Advanced tab you have the "Classic Editor" option enabled, you are using the older version of Divi.
2. The sections and modules in the back office look like the second dot in this screenshot.
3. You should even see a notification inviting you to use "the new Divi experience"... And for good reason!
4. It is still possible to fix the toolbar of the Divi Text module.
5. But in this case, the CSS will not be enough! You will need to add the following code to the functions.php file of your Divi child theme.

add_action('admin_head', 'toolbar_sticky');

function toolbar_sticky() {
  echo '';
}

Note: the Classic Editor plugin can also reproduce this Divi option, which I do not recommend.

5.2 - If you use the Divi Builder in the back office

If you have enabled the option to keep the classic editor and the new Divi Builder experience but you continue to edit your publications from the back office (and not from the front-end as I show in my video), in which case you will also have to use a different code...

1. If in the Divi tab > Theme Options > Creator > Advanced you have enabled the "last Divi Builder experience" option as well as the "classic editor" option , you can continue to build your layout from the back office.
2. The sections and modules in the back office look like the second dot in this screenshot.
3. It is still possible to fix the toolbar of the Divi Text module.
4. But in this case, the CSS will not be enough! You will need to add the following code to the functions.php file of your child theme.

add_action('admin_head', 'toolbar_sticky');

function toolbar_sticky() {
  echo '';
}

Note: the difference between the two codes for the back office is the value of the CSS property "Top". One is -30px and the other is -60px.

6 - Conclusion and additional resources

Thanks to this little trick, you will save redundant actions, gain in productivity and efficiency when creating your next content! What do you think? Have you ever noticed that this toolbar disappears when you scroll?

Here are some other Divi resources that might be of interest to you:

• Create a back up button with Divi
• Create a Sticky menu as a toggle tab
• Create a sticky menu on scroll
• Create a "Sticky" footer bar only with Divi options
• Create a Hello Bar with Divi
• Fixing the sidebar of your blog