How to make header sticky using Sticky Widget?

H @jtcheng,

thanks for reaching out.

You should be able to make custom elements sticky by adding a selector in the Custom Elements option. Please try that and let me know how it goes. Many solutions depend on the theme used so it is hard for me to say anything without testing the theme.

Thanks,
Thomas

Ok. I’ve tried using selectors but then some funny things happen that require getting deep into the CSS.

I was under the impression that the header can be made sticky through this plugin, but it sounds like the header region itself is not a widget area (or at least it doesn’t seem to recognize the default WP elements as shown in the following screenshots)…

Widgets area:
https://snipboard.io/XWunYj.jpg

Frontend:
https://snipboard.io/sCOwi5.jpg

So given that the only recourse at that point would be to get into the code and spend lots of time making sure the CSS is right based off of what custom classes I can come up with, then I guess this plugin is not really useful for this particular use case?

Just want to see if I’m not misusing the plugin for this case.

Thanks

Hi @jtcheng,

if this is still a GeneratePress theme then I was just able to make the header on my test site sticky by using .site-header in the Custom Elements option.

Is that something you tried?

Thanks,
Thomas

Hi Thomas,

Thanks for the suggestion.

I tried doing .site-header, which does make the header sticky for desktops.

However, then I get unresponsive behavior when I change the screen sizes, and I’m not sure what is the most graceful way of handling what would be. (sorry, I’m not the most comfortable with digging into the CSS weeds without messing something up)

I captured a screenshot here.

https://snipboard.io/QMX5iz.jpg

Any suggestions on solving this? (then that would close the book on this issue)

• This reply was modified 2 years, 12 months ago by jtcheng.

Just to establish a reference, when I turned off .site-header in the Fixed Widget custom element field, the site header reverts back to being responsive again as shown in this screenshot.

https://snipboard.io/TmFdje.jpg

I also noticed that when the .site-header is sticky, the menu also doesn’t exhibit responsive behavior as shown here:

https://snipboard.io/w0sRoy.jpg

The baseline expected behavior (when Fixed Widget not involved with site header) should be like so:

https://snipboard.io/A980Zt.jpg

Thanks

Hey @jtcheng,

how are you testing responsiveness?

I can confirm that the mobile menu looks broken when I load the site on the desktop and then manually make it smaller. But when I load the site on a smaller screen in the beginning, then the header is fixed and behaves correctly.

Thanks,
Thomas

Hi Thomas,

I’ve tested the responsiveness both ways (via re-sizing the window on desktop and hard refreshing when the window is already small).

I have also looked at the behavior on the phone itself).

I can truly say that while refreshing may make the header cosmetically appear like it’s behaving correctly, the pull down menu does not.

The following screenshot from the phone illustrate this point:

https://snipboard.io/5I1RH6.jpg

That said, when I did a refresh on the left side, apparently the menu did self correct.

But shouldn’t responsive design be able to adapt to screen sizes on the fly?

That sounds off to me.

I guess, I can try to live with this signature, but it feels dirty.

You sure this is normal behavior for responsive design?

• This reply was modified 2 years, 12 months ago by jtcheng.

Hmm.. Still getting intermittent behavior concerning both the header behavior (and which page/post it gets applied to).

Also noticed that there’s an overlap between the header menu and the sticky sidebar (for the site where the sticky sidebar is working).

This is shown in the following screenshot:

https://snipboard.io/m4gJUE.jpg

How would I go about fixing that in a way that would be responsive (so tablet users in landscape orientation wouldn’t see this kind of behavior)?

• This reply was modified 2 years, 12 months ago by jtcheng.
• This reply was modified 2 years, 12 months ago by jtcheng.

Thanks for your feedback!

I have been wrapping my head around this and agree that we should not get into some hacky code.

I am not exactly sure why there is a conflict between the header and Fixed Widget, but am certain that there will always be cases where it just doesn’t work. FW has to manipulate elements to make them sticky and depending on the styles in the theme, that manipulation could break things. That is neither the theme’s nor FW’s fault, just two technologies not playing well together.

While I love a challenge, the most practical advice is to look through other plugins to see if they work better with their approach.

Thanks,
Thomas

I found a free plugin that maintains responsiveness with sticky header.

https://www.ads-software.com/plugins/mystickymenu/

• This reply was modified 2 years, 9 months ago by IT Hertz.
• This reply was modified 2 years, 9 months ago by IT Hertz.