Community Forums

Alright, I’ll take it from here and play a bit with transitions.

Thank you again.

Hello and thanks for the prompt solution.

The above code didn’t work for me, but it was in the right direction. I wrote the following which worked, based on your code:

//const header = jQuery(‘#header’);
const header_wrapper = jQuery(‘.header_wrapper’);
const body = jQuery(document.body);

window.onscroll = function () {
var top = window.scrollY;
if (top >= 120) {
body.addClass(‘sticky_header’);
header_wrapper.addClass(‘open’);
header_wrapper.css({“position”: “fixed”, “visibility”: “visible”});
}
else {
body.removeClass(‘sticky_header’);
header_wrapper.removeClass(‘open’);
header_wrapper.css({“position”: “absolute”, “visibility”: “visible”});
}
}

There are some issues that I’ll have to iron out such as:

1) The header_wrapper has an absolute position on my home page in order to appear over the Revolution slider, but a relative position on all the other pages in order to appear above the breadcrumbs. Therefore, I’ll have to write an action hook in PHP to enqueue two different JS scripts depending on whether it’s the homepage or not. Okay, consider that one as done.

2) The function seems to affect the mobile header as well and there’s a subtle movement there, but it’s very subtle to be a noticeable problem. Still, I’m looking forward to a theme update where this certainly won’t be an issue since you’ve already implemented mobile and desktop logic.

3) The animation speed of the sticky header when appearing and disappearing has been affected and it’s now faster. I would like to improve on that one. It’d help me if you could point me to the PHP and JS functions in the theme that handle the sticky header, so that I can see your original styling and mechanics.

I hope a more proper fix will be included in a future theme update so I can remove this code. Thank you.

• This reply was modified 4 years, 4 months ago by Louis7777.
• This reply was modified 4 years, 4 months ago by Louis7777. Reason: forgot to add the body variable

First of, you’ve posted a link to your home page. The correct link is this: https://support.codeless.co/?topic=suggest-us-features

(Edit: The link arrived correctly in the email notification, but the auto-embed cut the query string out.)

I will also leave a comment there, but this is not a “feature” that I want. I don’t want to suggest any features.

I am asking for a bug fix, because your demo has a bug. I’m asking it in the support center for the Tower theme – you don’t seem to have any other place for reporting bugs. Correct?

• This reply was modified 4 years, 4 months ago by Louis7777.

Then the styling and functionalities on the sticky header are not implemented correctly, on the run time.

Simply go to your demo to see this: https://preview.codeless.co/tower/default/

If -when the demo is done loading- your screen size is above 980 pixels (because the non-sticky mobile header appears at anything lower than that), then the sticky header will appear. This means, undoubtedly, that your intention is to have the sticky header appear at ALL resolutions above 980 pixels, according to the screen size indeed.

Thus, if I resize my window from 1080 to 1079 or to 1081 pixels (you can simply check it at the demo by performing resizing) and the sticky header doesn’t appear or stops appearing, it means it’s a bug.

Will you please release any bug fix for that in an upcoming version or provide me with a quick fix for Tower’s child theme?