How to make Divi text module editor toolbar sticky?

OK will give this a try...BUT why doesn't Divi put this into the product instead of having to do CSS on everysite we work on? Hope they decide to update the module.

 

OK the front end css works but not the backend. Would not make the change. Gave me an error. Now I was making the change in the Divi code direct rather than a child theme. Would that make a difference? It shouldn't. It was in the function.php page at the end.

 

This is the error message "Scrape nonce check failed. Please try again." Never seen this before ???

 

I tried deactivating all the plugins as I read that the SG Optimizer can cause this...no fix. Maybe the code is wrong? Here is the code I used:

add_action('admin_head', 'divi_help_wp_admin_css');
function divi_help_wp_admin_css(){
echo '<style>
.mce-top-part {
position: sticky!important;
top: -60px;
}
</style>';
}

 

YES that did it. I just went to file manager and added the code at the top of the file under the php notation and it works fine. Must have been something in the theme or the hosting. Works now in both the front end and back.
Cheers!! Now if Divi will add this to the main theme and text module. It should be standard as many pages have long text content.

 

Great post, guys! Very helpful. I applied this code successfully!

How do we also make the on-hover "settings bar" sticky? Please see my image.

 

Great, It works

 

Thanks for this.

Is it also possible to make the "Add Media" button, located just above the mce-toolbar, sticky as well?

 

Magic! That works and saves a whole lot of mousing up and down. Much appreciated

 

To make the Divi text module editor toolbar sticky, you can use CSS code to add a fixed position to the toolbar. Here are the steps:

1. Open the page with the Divi text module that you want to make the toolbar sticky on.
   
   
2. Click on the Text module to open the module settings.
   
   
3. Click on the "Advanced" tab and scroll down to the "Custom CSS" section.
   
   
4. In the Custom CSS section, add the following code:
   

css
.et_pb_text_inner {
position: sticky;
top: 0;
z-index: 999;
}

1. Save your changes.

This CSS code will make the toolbar sticky and keep it fixed at the top of the screen as you scroll down the page.

Note: If you have multiple text modules on the same page and you only want to make the toolbar sticky for one of them, you can add a unique CSS class to the text module by clicking on the "CSS ID & Classes" tab in the module settings, and then modify the CSS code above by replacing .et_pb_text_inner with your unique CSS class name.