Sticky Header Issues

  • Resolved Masidus

    (@masidus)


    3 years, 9 months ago

    Hello,

    Firstly thank you for the amazing plugin!

    There have been many topics raised on this and I have searched back through the pages of support requests however I am still at a loss on how to fix this issue.

    Essentially I’d like the banner to always be at the top of the screen with the ability to push down whatever elements are above it instead of them disappearing behind it.

    So when the banner is active at the top of the screen, I’d like to see the full top bar and header with the banner above it.

    When we scroll down the page this is not an issue, however an upwards scroll triggers the sticky header which the banner also covers.

    The issue we are foreseeing here is that when the banner is closed, we need to ensure that the sticky header moves back to the top of the screen and is not still set in a position lower than this.

    Hope all of this makes sense and looking forward to your reply.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author rpetersen29

    (@rpetersen29)

    Hi @masidus
    You’re going to want to add padding to the scrolling banner as well, so in Website Custom CSS:

    .header-wrapper.stuck {
   padding-top: 40px;
}

    Let me know how that works.

    Thread Starter Masidus

    (@masidus)

    Thank you very much for your quick reply.

    I’m very close to having this complete, there’s just one small detail.

    I added this code to the plugin website CSS:

    .header-wrapper.stuck {
   padding-top: 3.1em;
}
.header-wrapper {
   padding-top: 13px;
}

    This has sorted all the heights however as the page loads, the top bar now has a white space from the 13px gap which appears before the banner does and ideally we’d like for this not to happen somehow, ideally without any layout shift on the page also – EG if the gap was removed, then the banner loads in and moves the whole page down to accommodate itself.

    Hope this again makes sense and the staging site has been updated to reflect what I mean.

    Thanks again!

    Plugin Author rpetersen29

    (@rpetersen29)

    So i want to start with the disclaimer that the small gap while the page loads isn’t really something you should worry too much about. All pages load sequentially and in my career, which includes working for large e-commerce sites, how things look as they load in this manner was never something we bothered with. That being said if its something that bothers you i’ll certainly help you out with it. There’s two possible solutions.

    First you could enable the wp_body_open option, this causes the banner to be one of the first things on your page to load. If this results in the banner not opening its likely due to your theme not adhering to wordpress page format guidelines. And if you’re willing to alter your theme code you can add the hook in your page. More information here, https://developer.www.ads-software.com/reference/functions/wp_body_open/, and the page structure should look like :

    <html>
  <head>
 
    ..
    ..
 
    <?php wp_head(); ?>
 
  </head>
  <body>
 
    <?php wp_body_open(); ?>
 
    ..
    ..
 
    <?php wp_footer(); ?>
 
  </body>
</html>

    #2 you could add the following statement to your Website Custom Javascript section:

    
document.addEventListener('DOMContentLoaded', function(){
  var bannerNotLoaded = true;
  while (bannerNotLoaded) {
    if (document.getElementById('simple-banner').offsetHeight > 0){
      bannerNotLoaded = false;
      document.getElementById('simple-banner-site-custom-css').innerText = ".header-wrapper.stuck {padding-top: 3.1em;}.header-wrapper {padding-top: 13px;}";
    }
  }
}, false);

    In order for this to work you’ll need to keep something in the Website Custom CSS section but most likely something blank because it will be replaced. Something like this would do the trick:

    .header-wrapper.stuck {}

    Let me know how that works out.

    • This reply was modified 3 years, 8 months ago by rpetersen29.
    Thread Starter Masidus

    (@masidus)

    Hi again and thank you for such a detailed reply I really appreciate it.

    If I’m honest I didn’t understand the first option fully so I moved onto the second swiftly.

    The second option (JS) didn’t work and I tried both with the extra term in the CSS box and also without.

    This did lead me however to playing around with the CSS for a while and I seem to have found a remedy by adding the margin on the inside area of the header as a pose to moving the screen down from the top. This still changes the sizing however doesn’t create any break in the colour so is not noticeable.

    The fact that the CSS/JS is removed once the banner is closed is absolutely genius, none of this would have even been possible without this function!

    For those who are interested I’ll drop the final CSS below – I’m using the Flatsome theme, and inside this plugin I have the ‘Simple Banner Position’ set to ‘Fixed’

    .header-wrapper.stuck {
   padding-top: 3.1em;
}
.header-inner.flex-row.container.logo-center.medium-logo-center {
   margin-top:13px;
}
.stuck .header-inner, .stuck .logo, .stuck .logo img {
   margin-top:0 !important;
}

    Thank you so much for all of your time, best plugin support I’ve ever received hands down!

    Plugin Author rpetersen29

    (@rpetersen29)

    Glad you got something that works. Another trick that i didn’t think of is this custom css:

    .simple-banner ~ #wrapper header .header-wrapper:not(.stuck) {
    padding-top: 0px;
}

    How it works is the CSS to the right of ~ will only show when the simple-banner is loaded, its an adjacent selector, so it has to start at the top level of the HTML, so something like 

    .simple-banner ~ .header-wrapper:not(.stuck) {
    padding-top: 0px;
}

    wont work because .header-wrapper is a nested element in the <header> which is a nested element in #wrapper. The :not() selector does exactly what it says, it only applies .header-wrapper class when its not accompanied by the .stuck class. In your case that would apply to the header when you are at the very top of the site. Let me know if you want me to help reconfigure the CSS with these selectors. Glad to help and happy you’re enjoying the plugin.

    Thread Starter Masidus

    (@masidus)

    Hi again,

    Thank you for yet another detailed reply, you’ve really gone above and beyond with your help.

    With regards to reworking the CSS I may do this in future, however for now the info is really useful and I will try and learn more first so I can apply wider changes.

    I don’t mean to take up too much of your time and I should potentially open another thread for this, however is there a way to close the banner when someone clicks an element on the page, in our case the Add to Basket button?

    The only issue I’m facing now is that our basket is located in the top bar for desktop so it is hidden underneath the banner if someone adds something to cart.

    No worries if you don’t have time, you’ve already done so much to help me I really appreciate it!

    Thanks again and hope you’re well

    Plugin Author rpetersen29

    (@rpetersen29)

    There is a way to do that but i don’t think its the best solution and its very involved, e.g. removing a bunch of custom styles and setting cookies. Really the best way to handle that issue would be to set different header padding based on screen size using media queries, https://www.w3schools.com/css/css_rwd_mediaqueries.asp. It looks like your page switches to mobile at 849px. So the Website Custom CSS would look something like:

    
/* These are all of your DESKTOP styles */
.header-wrapper.stuck {
   padding-top: 3.1em;
}
.header-inner.flex-row.container.logo-center.medium-logo-center {
   margin-top:13px;
}
.stuck .header-inner, .stuck .logo, .stuck .logo img {
   margin-top:0 !important;
}
@media only screen and (max-width: 849px) {
  /* These are all of your MOBILE styles */
  .header-wrapper.stuck {
    padding-top: 3.1em;
  }
  .header-inner.flex-row.container.logo-center.medium-logo-center {
    margin-top:13px;
  }
  .stuck .header-inner, .stuck .logo, .stuck .logo img {
    margin-top:0 !important;
  }
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Sticky Header Issues’ is closed to new replies.