Scroll Bars

Hello,

A quick fix is to simply tell the header to hide any overflow:

header.site-header {
    overflow: hidden;
}

I’ll dig a little deeper and see what else I can find. Hang tight.

Upon further inspection, it appears that the closing </header> tag for the site header has been commented out, thus every element after the opening <header> tag is technically considered to be inside of it (which makes the header REALLY tall).

Now, because the closing tag is commented out, I’m presuming this was done on purpose (rather than it simply being missing which would look more like an accident). Am I correct in this presumption?

Kendall: Thanks for the advise. I checked the original code and you were right about line <!-- </header> #masthead --> on line 34 in header.php (even though I don’t remember changing it) so I put it back to </header> <!-- #masthead -->. I also tried adding
`header.site-header {
overflow: hidden;
}` at the end of style.css in both the SG Window theme directory and the Dream Way child them directory and edited lines 753 to 769
`/**
* Header
* —————————————————————————–
*/

.sg-site-header-1,
.sg-site-header {
display: -webkit-box;
display: -moz-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
}`
by adding at line 769
overflow: hidden, I tried all these separately and in every possible combination but nothing changed. (Yes, I did clear my cache.) I still have the two scroll bars and the sticking when scrolling unless you have the cursor on the appropriate scroll bar. It’s not fatal but it is annoying and even I sometimes think I’ve reached the bottom of a page when I haven’t so I know anyone else visiting the site will think the same. I guess I’ll just have to post a notice on every page about the problem since I can’t find any way to eliminate it.

Russ,

I’m trying to access your site to see about getting it fixed and I’m getting a 403 (forbidden) error when I try to access it. Let me know when the error is resolved and I’ll check again.

Cheers.

Kendall, I don’t understand why you’re getting a 403 error unless you’re trying to access the site from one of the ips that are blocked in htaccess.
193.47.80.
75.146.62.234
88.131.106.11
208.80.194.
75.126.85.215
128.111.48.138
87.248.163.54
84.122.143.99
Can you tell me exactly where you’re getting the error?
The site can be accessed at RussPerry.com. It’s not private and not password protected. There are parts that are restricted to registered members but these are all in the Genealogy section.
If you were trying to access php files like the theme files then yea, you wouldn’t be able to do that. Tell me what you wanted to see.

I see it now. The above link has four instances of “w” before the domain. Simple typo. I’m taking a look now.

Alright, it definitely looks like closing the header tag properly has changed things (in a good way but the above CSS rule I mentioned only works if the tag isn’t closed properly).

With the header closed, it’s now the body that has the overflow and is causing the second scroll bar to appear. Adding the following should sort it out.

body {
    overflow: hidden !important;
}

Let me know if this doesn’t work and I’ll look into it further.

Cheers.

Thanks again Kendall. That did indeed eliminate the 2nd scroll bar. I don’t know how you discovered it, but it works. It has, however, created another issue which I think I can work out…maybe. The dropdown menus at the bottom of the page and at the top of the screen no longer work. If the real problem is improperly closed body and header tags, I guess I need to figure out why and where and fix that.
Thanks again.
(Curious thing, I got your email 20 minutes before you sent it! )

Russ,

With most browsers, you can right click on something on the page and you’ll have an option to “inspect element” or something similar. This opens up some developer tools with the complete page source and the ability to edit CSS in real time (not persistently though).

Learning how to use the browser’s developer tools is fantastically useful so I suggest checking it out.

Cheers.

Problems all solved. Made one change to Kendall’s fix, changed

body {
    overflow: hidden !important;
}

to

body {
    overflow: visible !important;
}

to allow drop-down menus to be visible at bottom of page and

header.site-header {
    overflow: hidden;
}

to

header.site-header {
    overflow: visible;
}

to allow drop-down menus to be visible at top of page.
is topic is now closed.

Glad you got it sorted.

Cheers.