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.
Front - non-fixed toolbar :

After - fixed toolbar :

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?

What I call the toolbaris the style editing menu available in every text area of every Divi module and especially in the Text module.
This toolbar contains all the options needed to enrich your text:
- add fat
- italicise
- insert lists
- insert links
- highlight
- choose the alignment of the text
- add a title hierarchy
- etc.
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:

- If in the Divi > Theme Options > Creator > Advanced tab you have the "Classic Editor" option enabled, you are using the older version of Divi.
- The sections and modules in the back office look like the second dot in this screenshot.
- You should even see a notification inviting you to use "the new Divi experience"... And for good reason!
- It is still possible to fix the toolbar of the Divi Text module.
- 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...

- 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.
- The sections and modules in the back office look like the second dot in this screenshot.
- It is still possible to fix the toolbar of the Divi Text module.
- 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


Comment fixer la barre d’outils du module Texte de Divi ?
_______________________________________
Bonjoir,
Votre code ci-dessous ne fonctionne pas ?
/* toolbar sticky au scroll */
.mce-top-part {
position: sticky !important;
top: -60px;
}
Amicalement
Merci beaucoup pour cette astuce très utile au quotidien.
Merci Philippe
Salut Daniel,
En fait, il fonctionne seulement lorsqu’on utilise le Visual Builder. Je viens donc de mettre à jour l’article pour vous donner le code à utiliser si vous utilisez le Divi Builder en back-office et non en front-office. Tu trouveras toutes les explications dans le chapitre 5 : https://astucesdivi.com/fixer-barre-outils-module-texte/#lwptoc5
Merci pour la précision apportée au commentaire de Daniel car j’étais arrivé de mon coté à la même conclusion; mais pas de problème car je suis aussi utilisateur du Divi builder, mais je n’avais pas testé
Testé cette fois ci avec le Divi Builder, c’est OK, ça marche et c’est très pratique.
Merci
Cdt
Merci du retour Denis 😉
Super astuce ! Merci
Bonjour,
Je voudrais mettre une barre de notification fixe au dessus du menu haut horizontal, quelqu’unsait comment on fait ?
Merci beaucoup pour votre réponse
Il suffit d’activer la deuxième zone de menu