Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
If you are adding custom styling to Divi, sometimes you may notice that you get a horizontal scrollbar across the bottom of your browser window, or on mobile devices you are able to move the content left and right on the screen.
We don’t want this, it doesn’t look good!
It’s usually caused by an element being wider than its container so it hangs off the edge of the page, so ideally you want to find the element that is causing this horizontal scroll and fix it.
But sometimes with more advanced styling, we actually want an element to hang off the edge of the page to create a specific effect. An example is my Passion Child Theme which is a resource included in my Divi Academy Membership.
In the image below you can see some green triangles, these are not part of the image, they are added using CSS and the effect runs throughout the child theme.
So how do we avoid the horizontal scroll but keep our custom effects? A little CSS of course 
Add the following to your child theme stylesheet or Divi theme options custom CSS box and watch your horizontal scrollbar disappear!
#page-container {
overflow-x: hidden;
}
And that’s it, pretty simple eh?
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Hi Michelle,
thanks for that interesting trick !
Unfortunately, it doesn’t work for me, I suppose I made a mistake somewhere ?
I clicked on the three-lined “hamburger” menu button on the top right of the purple Divi Builder area of my page and I the code below in it. Saved and updated but the vertical scrollbar appear
#page-container {
overflow-y: hidden;
}
Can you make me on the right way please ?
Thanks
This is for horizontal scroll, not vertical!
Hello, Michelle, could you explain how to add customizable (width, autohide, color parameters) scrollbar in fixed vertical primary menu? My menu is too long
Is it possible without third-party plugins, if not, what can you recommend to use for it?
Thanks for guides!
This would be an invidual use case so it really depends on what you want to apply but these should help
https://css-tricks.com/almanac/properties/s/scrollbar/
https://css-tricks.com/custom-scrollbars-in-webkit/
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
https://www.w3schools.com/css/css_overflow.asp
Hi, Michelle, I think that part of your post “Style a Single Divi Menu item” was included at the bottom of this post.
PS – liked the “Remove Horizontal Scroll Bars” part of the post a lot!
Oops you’re right! that’s what happens when you clone posts
Thanks Mickey 