Double-Scrollbar being caused by Header

[fabiofava]

Hey there,

My website at voelivre.net is having a double vertical scrollbar when loading the pages. They disappear but cause navigation issues sometimes. I’ve managed to audit the Global CSS on the site and everything seems good at the global level.

I’ve tested with an empty Header, and the site shows no double-scrollbars. I’d need your help to try finding what CSS (at the headers) is causing that double vertical scrollbars. As you find, would you please point to me, so I can fix on all Headers?

I’ll set the support account and send you all infos via private message below. Thanks!

P.S. - I’m having a hard time to activate the other headers for the Shop (Voe), Blog (Experiencias), and Products and Posts, I can’t assign those to the specific pages. Please let me know what I’m doing wrong there too, thanks!

[ruenel]

Hello @fabiofava,

Thanks for writing in!

To get rid of the Double scroll bars, please set your Bar element height to “Auto”. And then in your custom header, make sure to set the priority to 0.

Keep in mind that the the Condition Control is where you will specify the logic for how something should be output. The Priority comes into play if you have two assets that might potentially overlap in some instances, allowing you to specify which should take precedent over the other. In these cases, the layout with the lowest priority will be used.

Best Regards.

[fabiofava]

@ruenel

To get rid of the Double scroll bars, please set your Bar element height to “ Auto ”. And then in your custom header, make sure to set the priority to 0 .

I’ve attempted setting all “Bar” elements to Height = auto, but the double-scrollbars keep appearing.

I’ve set all Headers Priority to 0 as said and I still can’t see the Specific Headers for the Blog (/experiencias/) or the Shop (/voe/) or the Shop Items/Blog Posts. They’re still have the main Header (Entire Site)… Bit confused on how to make it work.

Thanks!

[ruenel]

Hello @fabiofava,

Set the priority of the header for the entire site to 0 and then set the other header for specific pages to -1. Temporarily deactivate the WP Rocket and the Hummingbird plugin and then you can test the pages again.

By the way, I have check your header and some of the pages. I do not see a double scrollbars in your header or site. Can you please point out which page is showing the double scrollbars?

Thank you.

[fabiofava]

Hey @ruenel thank you for your infos.

I’ve disabled WP Rocket, Hummingbird and Varnish (at the server level) to avoid issues.

I’ve managed to set the Headers, so this seems to be fine.

The double-vertical-scrollbar loads with the page then disappears. But it’s there, and it makes my site to be slower and not behave properly. Sometimes the InfoBar (offcanvas) isn’t clickable, sometimes other elements aren’t clicable due to that.

Assigning the Empty Header, then the page(s) its assigned to doesn’t load the double-vertical-scrollbar. Otherwise it loads, then disappears just after the page loads…

I’ve tested setting height to “auto” on all “Bar” elements of the “Entire Site’s” (Main) Header but the double-vertical-scrollbar still loads after pages are loaded. I’m not sure I can solve it, that’s the last thing to solve on the site, hope we can get it.

Thanks!

[tristup]

Hi @fabiofava,

I have checked your website in multiple browsers but didn’t find the Double Scrollbar you are referring to. Please remember that the double scrollbar appears only if some of the element is taller or similar in height to their container.
I would suggest you check by deleting the elements of the header Bars one by one till the issue is fixed, and the last one you have deleted before the fix is the actual issue.

Thanks

[fabiofava]

Hey @tristup,

All you have to do is to keep looking and pay attention as the page loads. It loads, then disappears, but blocks parts of the page that become sometimes useless. I’ve managed to take a Screenshot as the page loads, here are the double scrollbars. They’re on every Header, all “Bar” elements have “height = auto” and using the Empty Header, doesn’t happen. Here’s the Screenshot:

I cannot delete every “Bar” element, since all elements are “Bar”. I cannot restart it from the scratch since it was made by a webdesigner and I don’t fully comprehend or master the Headers. So more I touch, worse it will get.

[tristup]

Hi @fabiofava,

You don’t need to delete the Bars, you can duplicate the Header and delete the elements in the duplicate header. If you are still not able to fix that, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access to the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[fabiofava]

Hello @tristup thank you for your patience and support. I think this is a way beyond my capacity with the Header Builder. I love the Pro Theme but I’m learning to walk on it. I’d kindly ask you to debug that, and let me know so I can learn by fixing it on the Live site. I’m sure you’ll be able to find what’s causing that on all of my Headers (except of course the Empty Header). I’ll send you the credentials for th Staging site in private message below.

[tristup]

Hi @fabiofava,

I went ahead with the investigation in your staging site, but unfortunately, the site is not accessible and showing HTTP ERROR 500. Can you please check and let us know when it is accessible.

Thanks

[fabiofava]

Hey @tristup I’ve fixed the Staging and it’s now working. I’ve had to keep Redis, Varnish and all caches disabled on both the Live and the Staging sites. Please let me know as you find it, so I can do the corrections on the Live site and delete the Staging (it uses Server resources and my server isn’t that powerful). Thank you very much and thank you for your patience and support!

[marc_a]

Hey @fabiofava,

I’ve checked your live and staging area using the chrome browser tools, you still set a fixed header height. Please follow the recommendation by my colleagues by setting the header height to auto. Though I am not able to replicate the double scrolling bar on my end but that’s usually the root cause of the double scrolling issue.

Please note that the given credentials are still not working.

Thank you.

[fabiofava]

Hey there,

First of all, support credentials are working just fine (I’ve logged in now so it’s working).

Second, the double-vertical-scrollbar is everywhere, it appears only when the page is loading. Please make a Hard Reload (shift + reload) and keep looking to the screen.

Third, by setting al “Bar” elements to “auto”, then the design gets broken. It’s something at the CSS level, maybe on the Global Header CSS or maybe on elements of the Header. But definitely it’s NOT the bar height to auto.

I’ll keep looking forward from some supporter that can also keep looking the page while it loads (so you can see the double-scrollbars appearing and disappearing on every page), and specifically one who can audit CSS on the headers, that is the issue.

Thank you very much and best regards.

[tristup]

Hi @fabiofava,

Now the Admin Login page is accessible but unfortunately the given credentials still does not work. Can you please check once and share the correct credentials.

Thanks

[fabiofava]

Hey @tristup as I said to @marc_a the login credentials are working, I can login at any time with the support account using the password I’ve set. I’m dropping it again on a secure note below.

Please try to audit all the CSS (global Header CSS and Elements CSS) at least for the Main Header: I’m sure the culprit is there but I can’t find what is wrong. Thanks!

I asked Miroslave to also take a look there. He’s very busy but hopefully he will be able to find and help in case you can’t find what’s wrong. Cheers!

[marc_a]

Hey @fabiofava,

We’re not quite sure why the credential is working on your end but it isn’t working on our end. My colleague and I already tested it but it doesn’t work on our end. You can check the video in the secure note indicating the issue. I suggest that you create new credentials so that we can troubleshoot your website properly.

Thank you.

[fabiofava]

Sorry folks, I’ve mistyped support with ppp instead of pp. I’ve fixed the Secure Note, you can copy/paste and it should work.

[tristup]

Hi @fabiofava,

I have checked your Header and found that the Cart Dropdown element has the margin and padding, which creates the issue in your case. I went ahead and disabled it and now the Double Scrollbar is not coming anymore. I have duplicated the Header and added it to the Test page too, you can find that in the secure note.

Thanks

[fabiofava]

Hey @tristup, I see you’ve fixed it. I’ve noted that, without the Margins and Paddings, the design of the cart element gets messed up… Is there any chance we add some padding inside? So the cart doesn’t get “designless” as it is now…

Then I will need the nice settings to replicate it on all headers on the Live site. Thanks!

[tristup]

Hi @fabiofava,

I went ahead and added the following custom CSS code into the Customize > Element CSS of the Mini Cart which apply the padding to the Cart Dropdown.

$el.x-mini-cart .widget_shopping_cart_content
{
    padding:15px !important;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks