Sticky header doesn't work on specific scenarios

sticky header

- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  Hello,
  
  I am using Tower theme.
  
  Sometimes the sticky header may stop working.
  
  I’m not sure about all of what may cause it, but I know at least one way to break it. You can reproduce it at your demo too:
  
  https://preview.codeless.co/tower/default/
  
  If you minimize and maximize the browser’s window with your mouse, or simply resize it a bit (make it either bigger or smaller), then it breaks and won’t appear.
  
  Any fixes?
  
  This topic was modified 3 years, 2 months ago by Louis7777.
- 3 years, 2 months ago azam
  Keymaster
  
  Hi,
  The styling and functionalities on the sticky header are implemented on the run time. It means that the sticky header gets its styling and functionality according to the screen size. You can check it by simply refreshing your site while you maximize or minimize the screen size.
  
  Thanks,
- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  
  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?
- 3 years, 2 months ago azam
  Keymaster
  
  Hi,
  Sorry for the inconvenience but, as I mentioned before that, the sticky header gets its styling and functionalities according to the active screen size. It means if your current screen size is 1080px then it gets its styling according to the screen size 1080px but when you resize the screen size i.e. 1080px to 1079px/1081px then the previous styling will get disturbed once you refresh your site then it’ll get its styling according to the screen size 1079px / 1081px.
  
  This type of styling behavior is normally known as run-time.
  
  Thanks,
- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  
  The styling of the 1080px screen size, is to have a sticky header visible and displayed. Correct?
  
  The styling of the 1079px/1081px screen sizes, is to have a sticky header visible and displayed. Correct?
  
  You are telling me that if you resize the screen by 1 pixel then the styling is lost and that it is supposed to be normal behavior? Is that what you’re saying?
  
  That is universally known as a bug, and I would really like a fix, please.
- 3 years, 2 months ago azam
  Keymaster
  
  Hi,
  Sorry for the inconvenience, but if you’re consistent about the issue you can suggest this feature to our developer team by simply posting in our Suggest us feature forum.
  
  Here’s the link to it:
  
  Home
  
  Thanks,
- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  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 3 years, 2 months ago by Louis7777.
- 3 years, 2 months ago azam
  Keymaster
  
  Hi,
  Sorry for the last reply, please post this in our important update forum
  Here’s the link to the Update forum
  https://support.codeless.co/?topic=important-update-required
  
  We’ve also noticed the fact and will try to fix this ASAP in our upcoming theme updates.
  
  Thanks,
- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  
  I’ve posted there as well. Hopefully it will be fixed. Thanks.
- 3 years, 2 months ago azam
  Keymaster
  
  Sure!
  Thanks for your time and patience.
- 3 years, 2 months ago azam
  Keymaster
  Hi,
  Please add the following JS code in the child theme for the sticky header:
  
  const header = jQuery('#header'); const body = jQuery('body'); window.onscroll = function () { var top = window.scrollY; if (top >= 120) { jQuery(body).addClass("sticky_header"); jQuery(header).css({"position": "fixed", "top": "0"}); } else { jQuery(body).removeClass("sticky_header"); jQuery(header).css({"position": "relative"}); } }
  
  Thanks,
- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  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 3 years, 2 months ago by Louis7777.
  
  This reply was modified 3 years, 2 months ago by Louis7777. Reason: forgot to add the body variable
- 3 years, 2 months ago azam
  Keymaster
  
  Hi,
  Can you please share your site URL? So, we’ll take a look at how the code actually works on your site.
  
  Thanks,
- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  The website is 2science.gr
  
  Αρχική
  
  I’ve pasted the entire code at pastebin, the PHP action + JS:
  
  https://pastebin.com/n8LbFK0m
  
  The main issue is #3 of the above issues, the animation speed. I’ve already dealt with #1.
  
  This reply was modified 3 years, 2 months ago by Louis7777.
  
  This reply was modified 3 years, 2 months ago by Louis7777.
- 3 years, 2 months ago azam
  Keymaster
  Hi,
  You can use the transition effect as below
  
  header_wrapper.css({"position": "fixed", "visibility": "visible", "transition": ".3s ease-out .1s"}); AND header_wrapper.css({"position": "{$header_position}", "visibility": "visible", "transition": ".3s ease-out .1s"});
  
  More code creates more problems that’s why we recommend you to beware of it.
  
  Thanks,
- 3 years, 2 months ago Louis7777
  Participant
  
  Expired
  
  Alright, I’ll take it from here and play a bit with transitions.
  
  Thank you again.
- 3 years, 2 months ago azam
  Keymaster
  
  Welcome!

Viewing 16 reply threads

You must be logged in to reply to this topic.

Community Forums

Sticky header doesn’t work on specific scenarios

Site Links

Useful Articles

Login