Title: Auto scroll bar blocking widget title Last modified: August 22, 2016 --- # Auto scroll bar blocking widget title * [sonrisenewnan](https://wordpress.org/support/users/sonrisenewnan/) * (@sonrisenewnan) * [11 years, 3 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/) * I added the code `overflow:auto` to my home page widget area so that scroll bars would appear if needed. But when I did, it caused the widget title to be partly covered up. You can see the widgets before I added the scroll bar below to see the original problem I’m trying to solve. Notice the Facebook content goes below the widget area. * Site here: [http://www.sonrisebaptist.org](http://www.sonrisebaptist.org) * Before adding `overflow:auto` it looked like this. [IMG]http://i62.tinypic.com/ 2s1vdw7.png[/IMG] * Thanks! Viewing 9 replies - 1 through 9 (of 9 total) * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 3 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792773) * Hey there sonrisenewnan, * Hope you’re well today! * You should be able to fix this with some custom CSS. Please try adding the following CSS code in the style.css file of your [child theme](http://codex.wordpress.org/Child_Themes) or if your theme doesn’t have custom CSS tab add it in your site using the following plugin: * [http://wordpress.org/plugins/simple-custom-css](http://wordpress.org/plugins/simple-custom-css) * ``` .resurrect-widget-has-title > * { top: -8px; } ``` * This should move titles slightly bottom so they are visible. Please let me know if this helps 🙂 * Best regards, Bojan * Thread Starter [sonrisenewnan](https://wordpress.org/support/users/sonrisenewnan/) * (@sonrisenewnan) * [11 years, 3 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792788) * Thanks Bojan. I removed the scroll bar code so you can see how the title is supposed to look. It actually needs to go up not down. Now you’ll notice the original problem, the Facebook content goes below the widget area. * This is a pic with the code `overflow:auto`. [http://tinypic.com/view.php?pic=2s1vdw7&s=8#.VOIfeChqLFU](http://tinypic.com/view.php?pic=2s1vdw7&s=8#.VOIfeChqLFU) * Thanks! * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792855) * Hey there sonrisenewnan, * Thank you for the clarification. Could you please try replacing your code for scroll with this one: * ``` #text-3 .textwidget.resurrect-widget-first-element { overflow-y: scroll; height: 250px; } section#text-3 { padding-right: 0; } ``` * This should be the result [http://screencast.com/t/f41qkkmqu5Gz](http://screencast.com/t/f41qkkmqu5Gz). * Hope this helps 🙂 * Best regards, Bojan * Thread Starter [sonrisenewnan](https://wordpress.org/support/users/sonrisenewnan/) * (@sonrisenewnan) * [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792860) * Bojan, * Thanks for the help. I added that code but it didn’t make any change to the layout. Still looks the same. Do I need to delete something else? * Here’s the widget portion of the child theme .css: * ``` /************** HOMEPAGE WIDGETS **************/ #resurrect-home-bottom-widgets { margin: -30px -3.3% 0 0; /* compensate for individual top widget margins + margin between columns*/ border-top: 1px solid transparent; /* hack to fix top margin */ } /* Container Adjustment */ .resurrect-home-widget { /* .resurrect-widget */ width: 30.2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 280px; #text-3 .textwidget.resurrect-widget-first-element { overflow-y: scroll; height: 250px; } section#text-3 { padding-right: 0; } } ``` * Thanks. * [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/) * (@wpmudev-support4) * [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792876) * Hey there sonrisenewnan, * From the code you pasted I can assume that you’re editing original style.css. I strongly suggest not doing that since all changes will be lost once you update the theme. * You should either use child theme and add the code at the bottom of your child theme style.css or use the plugin I mentioned above and simply add the code in Appearance >> Custom CSS once the plugin is installed and activated. * I think you’re not targeting the correct class in style.css which is making the code not to work properly. What I did is simply add the scroll to the content element inside that specific widget rather then the whole widget which is leaving the heading the same as before. * Hope this makes sense 🙂 * Best regards, Bojan * Thread Starter [sonrisenewnan](https://wordpress.org/support/users/sonrisenewnan/) * (@sonrisenewnan) * [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792880) * Thanks again for your help! I am using a child theme for changes. You can see where I posted your code within the child theme. * I’m using the * Container Adjustment * to constrain all 3 home bottom widgets to 280px high regardless of content. Without this, they will resize based on content. * Matt * ``` /* Theme Name: Resurrect Child Theme URI: http://sonrisebaptist.org/newsite/wp-contect/themes/resurrect-child/ Description: Resurrect Child Theme Author: Author URI: http://example.com Template: resurrect Version: 1.0.0 */ @import url("../resurrect/style.css"); span.wpcf7-list-item { display: block; } /************** HOMEPAGE WIDGETS **************/ #resurrect-home-bottom-widgets { margin: -30px -3.3% 0 0; /* compensate for individual top widget margins + margin between columns*/ border-top: 1px solid transparent; /* hack to fix top margin */ } /* Container Adjustment */ .resurrect-home-widget { /* .resurrect-widget */ width: 30.2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 280px; #text-3 .textwidget.resurrect-widget-first-element { overflow-y: scroll; height: 250px; } section#text-3 { padding-right: 0; } } ``` * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792882) * You’ve forgotten the closing bracket for the `.resurrect-home-widget` section, which is causing parsing errors down the rest of your child theme’s stylesheet. It looks like it should go right after `height: 280px;`, on line 31 of your child theme’s stylesheet. * Thread Starter [sonrisenewnan](https://wordpress.org/support/users/sonrisenewnan/) * (@sonrisenewnan) * [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792891) * Stephencottontail, you are right. That fixed it! * Is it possible to change the color of that widget’s scrollbar to blend better with the site? Maybe a gray color. * Thanks, Matt * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792895) * Apparently, yes, although it doesn’t work on Firefox. Check out [http://codemug.com/html/custom-scrollbars-using-css/](http://codemug.com/html/custom-scrollbars-using-css/) for more information. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Auto scroll bar blocking widget title’ is closed to new replies. ## Tags * [auto](https://wordpress.org/support/topic-tag/auto/) * [overflow](https://wordpress.org/support/topic-tag/overflow/) * [widget](https://wordpress.org/support/topic-tag/widget/) * 9 replies * 3 participants * Last reply from: [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/auto-scroll-bar-blocking-widget-title/#post-5792895) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics