A horizontal scrollbar appears when an element on the page exceeds the screen width, causing overflow. Most WordPress themes avoid horizontal scrolling, as it can disrupt your site’s layout and confuse visitors.
This can be frustrating for you as a site owner, and believe us,, it’s even more frustrating for your visitors who are trying to navigate your content.
Fortunately, based on our experience, disabling overflow and removing that scrollbar is usually a simple process that significantly enhances your site’s appearance and usability.
In this article, we will guide you through the steps to easily disable overflow in WordPress and eliminate the horizontal scrollbar. Our clear instructions are user-friendly and easy to follow, even for those without coding expertise.
What Causes the Horizontal Scrollbar or Overflow in WordPress?
When creating your WordPress website, it’s essential to ensure it is user-friendly and accessible to everyone.
WordPress will display a horizontal scrollbar when an element exceeds the width of your website layout. This phenomenon is known as ‘overflow.’ A horizontal scrollbar can disrupt your design and diminish your website’s user-friendliness.
Having both horizontal and vertical scroll bars on a web page can confuse visitors and make navigation difficult. This can lead to higher bounce rates and decreased conversions.
Disabling overflow enhances user experience, establishes a fixed-width layout, and boosts your site’s overall responsiveness.
Now, let’s explore how to easily disable the horizontal overflow scroll bar in WordPress:
- Method 1: Adding CSS Code via Theme Customizer
- Method 2: Adding CSS Code using WPCode
- Bonus: Implementing a Custom Scrollbar in WordPress
Method 1: Adding CSS Code via Theme Customizer
You can disable overflow in WordPress by adding CSS code in the ‘Additional CSS’ section of the theme customizer.
Simply navigate to theAppearance » Customizesection from your WordPress dashboard.
Note:You may seeAppearance»Editorinstead ofCustomize.This indicates that your theme utilizes the full-site editor (FSE) rather than the Theme Customizer. You can refer to our guide on resolving the missing theme customizer issue or follow Method 2 below.
Navigate to the Customize page and select the ‘Additional CSS’ tab.
Next, copy and paste the following CSS code:
html, body { max-width: 100%; overflow-x: hidden;
}
After applying this code, any horizontal overflow will be eliminated, and you can view the changes in the live preview of your website.
Remember to click the ‘Publish’ button at the top of the page once you’re finished!
Method 2: Adding the CSS Code Using WPCode
Alternatively, you can add the CSS snippet through the WPCode plugin.
WPCode is a leading WordPress code snippet plugin, utilized by over 1 million websites.
We recommend this approach because the plugin simplifies the process of adding custom code to WordPress without needing to modify theme files.
First, install and activate the WPCode plugin on your website. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.
Note: WPCode also offers a free version suitable for this tutorial. However, upgrading to the premium plan provides additional features like conditional logic, a cloud library of code snippets, and more.
After activation, go to the Code Snippets » Add New SnippetsAccess this page from your WordPress dashboard.
Click on the ‘Add Custom Snippet’ button located under the ‘Add Your Custom Code (New Snippet)’ section.
Next, choose ‘CSS Snippet’ as the code type from the available options that appear on the screen.
You will be redirected to the ‘Create Custom Snippet’ page, where you can begin by entering a title for your snippet.
This title is for your reference only and will not be visible to users.
Then, copy and paste the following CSS code snippet into the ‘Code Preview’ box:
<style type="text/css">
html, body { max-width: 100%; overflow-x: hidden;
}
</style>
After that, scroll down to the ‘Insertion’ section, where you will see two options: ‘Auto Insert’ and ‘Shortcode.’
Select the ‘Auto Insert’ option to automatically run your code once it is activated.
If you prefer to disable the horizontal scroll bar on specific pages only, choose the ‘Shortcode’ option.
After activating the snippet, WPCode will generate a shortcode that you can place in a designated area of your website to eliminate overflow.
Once you’ve made your selection, navigate to the top of the page and switch the toggle from ‘Inactive’ to ‘Active’ in the upper right corner.
Next, simply click the ‘Save Snippet’ button.
That’s all! You’ve successfully removed any horizontal overflow scroll bars from your website.
Bonus: How to Add a Custom Scrollbar in WordPress
Now that you’ve disabled the horizontal scroll bar, you can enhance your site by adding a custom scrollbar.
For instance, if your website follows a specific color palette that aligns with your brand, you can match your scrollbar color to that palette. This creates a visually appealing experience and encourages users to explore your site.
To create a custom scrollbar, install and activate the Advanced Scrollbar plugin. For detailed instructions, refer to our beginner’s guide on installing a WordPress plugin.
After activation, go to the Settings » Advanced Scrollbar Settings page in your WordPress dashboard. Here, you can customize the scrollbar color to suit your preferences.
After completing the steps, click the ‘Save Changes’ button to apply your settings. For additional guidance, check out our tutorial on adding a custom scrollbar in WordPress.
We hope this guide has helped you learn how to disable overflow on your WordPress site. You might also be interested in our expert recommendations for the best code snippets for WordPress and our beginner’s guide on removing unused CSS in WordPress.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
