I noticed the ‘stickyness’ of the header in Bento theme is being produced by the .js file \themes\bento\includes\js\theme-scripts.js:94,394, and what it does is it basically clones the entire header over the existing one ($bento_headerClone), and mandatory hides the original header by rendering opaque background color div over it.

Please help me get to trigger the same cloning of the ‘sticky’ fixed header in the js file also in the mobile view of the site, not just in the desktop view.

This feature issue is easy to inspect on the live demo page of the theme – https://satoristudio.net/bento/full-width-classic-page/. To recreate the issue, it is important not to simply resize the browser window, but to view it on actual mobile device. Because if you trigger the ‘stickyness’ of the header on the desktop view, when resizing, the rendered DOM might remain in browser and succesfully show on the resized ‘mobile’ view of the browser, however it is a false representation of the view, it is not authentic.

Thank you kindly in advance,

There’s something I have to check to enable this feature? As you can see the anchor links are overlapped by the menu header both on desktop and mobile devices.

Thanks for helping!
Angelo

I have installed and implemented your elementor addon on the above URL, but I want some variation.
– The header should be hidden when we load the page.
– There needs some more delay in the header to appear, like when the user scrolls up from around 200px the header should appear.
– When we scroll all the way to the top of the page it disappears again (So the header will disappear if our scroll is on top position).

I hope these changes make sense, please let me know if you understand.

Waiting for your response.

Thanks & Best Regards,
Barjinder

On the prediction page there are two anchor link linking to the matches and the bonus questions. I have a website with a fixed header. When clicking on one of the links mentioned a part of the page eg the bonus question is covered by the header. Is there a way to solve this?
Thanks for your support.

My Website is higrades.pk

Issue: I have a large table, and I have the formatting basically where I want it and I like the look now, but I need the header row to stay in view even when scrolling down… I found a code that almost does the trick (.tablepress thead {table-layout: above; position: fixed;) however when I use this two unintended things happen:

#1 – it doesn’t keep the column widths the same as the main table it seems to scale them to match the cell content of only the header row so nothing lines up

#2 – it stays fixed where the table originally loads… ie. because my table loads half way down the page, the header row stays stuck there at the bottom of the page and the table just scrolls behind it…

what I really need is for the header row to #1 be the correct width to match the rest of the table, and #2 I need the header to scroll up along with the table until it reaches the top of the page and then hold there while you continue scrolling so that the header is always in view, but you can see the maximum amount of the spreadsheet too and it’s not only at the base of the page where it loads :)…

It looks like you have an extension that should work @ https://tablepress.org/extensions/datatables-fixedheader/ according to other posts… however for some reason I can’t load that page… I can get to tablepress.org, but not any of it’s other pages… it keeps throwing an error “Unable to connect”… is that on my end? I have had issues connecting to .org websites in the past, but because it allows me to get to the main site I can’t figure out what the issue is…

Any help you can give me on this would be extremely appreciated! I am new to wordpress and coding, but I am learning fast and doing my best!
Thanks so much!
~Kristin