Preventing the Divi Theme Horizontal Scroll-Bar Bug

Written by Dan Mossop

There is a minor bug in the Divi Theme which causes the horizontal scroll bar to be shown and allows the user to scroll a little bit past the edge of the main blog. Here's how to fix it.

First, an example of what I'm talking about.

divi theme scroll bar bug

Notice that the horizontal scroll bar is showing, and that having scrolled as far as I can go, I'm now slightly off the side of the page and can see the edge of the header bar.

It took me a while to track down the culprit. All the visible components of the screen were correctly staying within the bounds of the normal screen size. The offending component, then, had to be something invisible! Turns out it is the drop-down submenu which causes the problem, as can be seen here:

divi theme scroll bar bug - submenu

So how do we fix the issue? It's as simple as adding the following CSS to the theme:

#page-container { overflow:hidden; }

This forces the part of the menu which spills over the page to be hidden from view. The result is that the horizontal scroll bar is no longer shown and you can't scroll past the edge of the screen.

Here's the final result. Notice the lack of horizontal scroll bar this time:

divi theme scroll bar bug - fixed

The fix doesn't seem to cause an issue actually accessing the menus. But be sure to check on your own site just to be sure.

Supercharge Your Posts with AI-Driven CTAs

Resolve issues like the Divi horizontal scroll bar bug while boosting your site's engagement. Use WP Magic CTAs to transform each post with AI-generated call-to-actions that increase conversions effortlessly. Perfect for directing users to helpful resources after solving technical glitches.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

34 Comments

  1. Thanks! This worked great!

    Reply
    • You're welcome, Renzo!

      Reply
  2. For anyone who still is seeing a scroll bar on mobile – add this to your theme CSS:

    html, body {
    overflow-x: hidden;
    }
    body {
    position: relative
    }

    I got this from stackoverflow and it solved my problems!!

    Reply
    • Thanks Naf! Yeah, that should do it :)

      Reply
  3. That worked flawlessly. Thank you so much.

    Reply
    • Great! Glad it helped, Josepha.

      Reply
  4. It Works well, but bot in mobile. There's somethimg to do?

    Reply
    • Hey Renato, is there any chance you're able to share a link to the site you're working on? There's probably some element on the page which is protruding off the edge of the screen at mobile widths. If I'm able to take a look at the site I'll hopefully be able to tell you what that item is / what to do about it. Thanks!

      Reply
  5. Incredibly helpful! Thanks for sharing!

    Reply
    • You're welcome, Steve!

      Reply
  6. Amazing! I had gone over the pages and the header and footer again and again trying to figure out what was going on. Thank you!

    Reply
    • You're welcome, Anna!

      Reply
  7. legend

    Reply
  8. you absolute rockstar!

    Reply
    • :)

      Reply
    • Hi Agustin, you can add it into the "Divi > Theme Options > General > Custom CSS" box, or alternatively the style.css file of your child theme (if you're using one). I hope that helps!

      Reply
  9. <3

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Open Divi Social Media Icons in a New Tab

Ensuring your website's social media icons open in a new browser tab creates a seamless user experience and keeps visitors engaged with your site while allowing them to explore your social media presence. This approach prevents users from navigating away from your...

Set Hover Color for Menu Links in the Divi Menu Module

Customizing the hover color of menu links lets you enhance the user experience and maintain visual consistency with your website’s brand. By setting a specific hover color, you can guide visitors' attention and improve navigation feedback. In this guide we show you...

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Random Divi Posts