Sticky menu doesn’t work?

  • Resolved jamesin144

    (@jamesin144)


    3 years, 11 months ago

    The plugin works great for a majority of the use cases I can’t seem to get the sticky setting to work.

    I’ve enabled sticky on the simple banner position and added the following css to the simple css section however there is no stickyness of the banner although when I go into developer mode, I can see the css class adding the scrolling class but it just doesn’t stick the banner.

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

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

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

    (@rpetersen29)

    Hi @jamesin144
    Sticky positioning requires one of top,left,right, or bottom css attributes. For reference, https://www.w3schools.com/css/css_positioning.asp. I will include that messaging in an upcoming revision. You can add top: 0; to simple-banner { Custom CSS box and your custom css will work.

    Thread Starter jamesin144

    (@jamesin144)

    Thank you for the prompt response.

    I’ve changed the css code to

    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;

    for both simple banner and simple banner scrolling but it still doesn’t stick.

    Am I doing something wrong?

    Plugin Author rpetersen29

    (@rpetersen29)

    It doesn’t look like those changes went through, do you have any plugins that cache your page? If so you may need to clear those caches in order for the changes to come through.

    Thread Starter jamesin144

    (@jamesin144)

    I’ve just cleared the cache of the entire website and tried opening up any webpage with the banner in google chrome incognito but with no luck.

    When I go into developer tools to look at the css it looks like the css is showing up but not doing anything. For example, when I inspect the element for the simple banner scrolling, I can see the top:0 and the position:sticky values but the actual sticky effect doesn’t work on the webpage.

    Do you have any idea why this is the case?

    Plugin Author rpetersen29

    (@rpetersen29)

    Yeah thats very odd, i had it working earlier and now it doesn’t work. Please remove all of the changes so for now so i can see if i can get it working. Also, for reference, you don’t need to put it in both simple-banner and simple-banner-scrolling, only simple-banner.

    Thread Starter jamesin144

    (@jamesin144)

    Ok I’ve just tested by removing the code from simple banner scrolling and only having the code in simple banner and that still didn’t work.

    I’ve removed the css code for both completely for now until you get a chance to see if you can get it to work.

    Plugin Author rpetersen29

    (@rpetersen29)

    Okay so the sticky wasn’t working because the parent element, <body>, has the overflow property set, https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working. You could fix this by setting this in Website Custom CSS:

    body {
    overflow: initial;
}

    I’m not sure how that would affect other things on the site. So alternatively you could just put position: fixed; in the simple-banner-scrolling CSS box and the effect you’re looking for is essentially the same.

    Thread Starter jamesin144

    (@jamesin144)

    Great looks like it works now! Thank you.

    Hi there,

    Great plugin. Does exactly what is required.

    I also had the issue with the sticky setting. I followed your advice to “put position: fixed; in the simple-banner-scrolling CSS box”. This worked but was a bit “flicky”.

    I then put “position: fixed;” into the simple-banner CSS box and it works without issue.

    Thanks.

    • This reply was modified 3 years, 7 months ago by chappers1972.
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sticky menu doesn’t work?’ is closed to new replies.