1. POPULAR Add more varieties for your Divi header (12 premade styles): https://header.diviultimate.com/
BEST Divi Block - An online drag & drop tool to easily mix & match 417+ premade blocks (light / dark version), including custom header, fullscreen / slide in mobile menu, mega menu, custom footer, page design blocks, before / after image slider, promo bar, floating button, logo carousel, content toggle, slide in bar, etc.
Learn MoreTry Free Version

How to make Divi text module editor toolbar sticky?

Discussion in 'Divi Tutorials' started by Divi.Help, Jul 11, 2021.

  1. Divi.Help

    Divi.Help Administrator
    Staff Member

    If you have a long content in the text module settings, it would be troublesome for you to scroll up & down to access the text editor toolbar.

    But here's a simple CSS solution to solve the issue.

    Just paste the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .mce-top-part {
        position: sticky!important;
        top: -60px;
    }
    upload_2021-7-11_16-25-44.png

    The above solution works for Visual Builder, but not backend builder.

    For backend builder, you will need to paste the below code in your child theme functions.php:
    Code:
    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>';
    }
    That's all. Hope you enjoy it.
     
    1. AD Power up your Divi sites with tons of new functionalities:Learn More
  2. wpatters1229

    wpatters1229 New Member

    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.
     
  3. wpatters1229

    wpatters1229 New Member

    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.
     
    1. AD Free Divi before after image slider layout:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may suggest it to official Divi support at: https://elegantthemes.com/members-area/help
    You can do that as well. I just tested the code in the parent theme functions.php & it works. What error you're seeing?
     
  5. wpatters1229

    wpatters1229 New Member

    This is the error message "Scrape nonce check failed. Please try again." Never seen this before ???
     
    1. AD Tons of premade layout & section designs + functionalities for your Divi site:Learn More
  6. wpatters1229

    wpatters1229 New Member

    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>';
    }
     
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to use FTP instead to edit it.
     
    1. AD Free Divi content toggle layout:Learn More
  8. wpatters1229

    wpatters1229 New Member

    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.
     
  9. JasonDivi

    JasonDivi New Member

    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.

    [​IMG]
     
    1. AD Whitelabel Divi sites with your own brand:Learn More
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    To make the Divi module settings bar sticky, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .et-fb-component-settings--module {
        height: 100%;
    }
    .et-fb-component-settings--module .et-fb-button-group {
        position: sticky!important;
        top: 50px!important;
    }