Header Widgets not scrolling desktop view

[gimmechefs]

Hi

Im making use of the header widgets. 4 columns.

Viewing on the desktop, the widget area doesn’t scroll down with the content,

Lets say I have 30 pages listed in the widget, and only 20 pages are displayed on the desktop screen. You cant scroll down to the last 10. The scroll bar is visible, and the scroll button moves down, but the page doesn’t move down.

Any help would be greatly appreciated.
Max

[rad]

Hi @gimmechefs,

Thanks for reaching out.

It’s only normal since header widgets are fixed position, it follows as you scroll (try reducing your widgets and you’ll see what I mean, it stays on screen as you scroll). The page actually scrolls, but the widget area covers the entire page creating an illusion that it’s not scrolling. That area is not meant for tall content due to the height restriction of all devices, responsive layout only works with width.

A workaround is adding another scrollbar for widgets. Example, please add this CSS to your global custom CSS.

.x-widgetbar-inner {
    overflow: scroll;
    max-height: 100vh;
}

Thanks!

[gimmechefs]

Hi Rad

Thanks for that. The problem i had was using a a contact form. Looked great on the widget until a required error message was thrown, took the submit button below the page.

Your snippet worked perfectly.

Thanks
Max

[christian]

You’re welcome, Max.