Robert Wattner
Forum Replies Created
-
@007me Almost forgot, can you please try increasing the “Scroll Distance” setting to 100px for testing?
It just needs to be more than the height of the top blue section. If the header is not yet at the top of the page when the scroll distance is reached, then the header will “jump” from wherever it is to the top. With the current scroll distance the header isn’t quite at the top and is jumping a few px@007me That’s great the left spacing is solved! Sorry, I didn’t realize you weren’t using Elementor Pro. The plugin is really just meant to add functionality to the Pro sticky feature but I think we should be able to get your header working how you like. If you have a way to add custom css could you please try this code and let me know if it works for you.
.she-header-yes, .she-header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; }If that doesn’t help then I might have you email me rwattner@gmail.com so I can help you further. Due to wp forum rules, I’m a bit limited here, unfortunately.
I hope that does the trick, let me know.@imincognito Yes we are much closer now. Since then we found out we had to add an entire admin section for settings and account info. This was a major, time consuming addition. More recently we had to rework the custom nav menu and take it in a completely different direction. That is one of the biggest, most complex features of the plugin so an entire revamp took some time. Also recently, elementor changed how their template system works and that entire portion of the plugin had to be redone as well. We are introducing header block templates to the pro version. That is an even bigger job than the others.
The plugin is now integrated with freemius for using activation codes to upgrade from free to pro version.
We have come a really long way and are very excited to release the pro version. With there only being 2 of us doing this in our spare time while managing family and the pandemic it has taken longer than expected unfortunately. We want to release the best product we can especially now that it will be a paid plugin. This just takes time. Hopefully no more major changes come up and we can get this thing released.Also, just made a Facebook page Facebook.com/stickyheadereffects
@007me After looking at your site I found the issue that is pushing the site to the right. It’s not my plugin, it’s this bit of code:
#site-navigation-wrap { float: left; left: -15px; right: auto; }The “left: -15px;” is the problem. It is on this portion of the header
https://drive.google.com/file/d/10WX3AXhRRYpxTvQq_pQG8pUVuXsPeCs2/view?usp=drivesdk
I’m not sure exactly what is adding that code but if you want to disable it then you can simply use this code:/* NAV WRAP LEFT SPACING */ #site-navigation-wrap { left: 0 !important; }As for the page jumping… I see you have transparent enabled but your header is solid white. In this case, you should turn off the “transparent header” option. This is what’s happening with it enabled as stated
https://drive.google.com/file/d/1N3RRZXPmwHYRWe3nAIcwRhyp8FYPhahA/view?usp=drivesdk
The “blur background” you have enabled won’t work with a solid background color. Set the “Background Color” option to change to a semi-transparent color by lowering the opacity a little bit if you want to see the blur.
https://drive.google.com/file/d/16c7Ij4W_EqenPNUoV4U8XafAQIP0lw60/view?usp=drivesdk
https://drive.google.com/file/d/1Ddd5ZIhq7ipQTffUUkhq3uvBjq8Mwpc3/view?usp=drivesdk
Next, since you just need a simple sticky header, just use Elementor’s “Motion Effects” “Sticky” option set to “Top”. It’s under the advanced tab of the header section.
https://drive.google.com/file/d/1QBvSSgHuKmpWxdYUPuO2E1kdPmHN-j-O/view?usp=drivesdk
https://drive.google.com/file/d/1Hvhh9Kw7Cn7LKrfqP6SONVygvdUr5oYW/view?usp=drivesdk
Finally I would increase the “Scroll Distance” setting to be greater than the height of the top most blue section which seems to be 45px desktop and 75px mobile. You might want to set it even more if you plan on using a semi-transparent background.
Let me know if these changes help you. I’d be happy to help you further if you need.- This reply was modified 4 years, 4 months ago by Robert Wattner.
- This reply was modified 4 years, 4 months ago by Yui.
@007me Hi, I’m sorry you are having issues. I’ll be happy to help you get this sorted out first thing tomorrow. I was gone all day today and now it’s late here.
Hi, thanks for the review. Some situations require the motion effects sticky to be on or off depending. With the upcoming v2.0 and pro versions I have added more control over the sticky and transparent settings. Along with more prompts and instructions, I’m hoping this will be more seamless and understood going forward
Hi, thank you for bringing this up. I’ll look into changing this and updating.
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Icon color change on scroll@ruikowski Here is code that is more browser-friendly. It’s better to have prefixes just in case
/* MOBILE ICON COLOR */ .she-header-yes .elementor-icon svg line { -webkit-transition: stroke 0.4s ease-in-out; -o-transition: stroke 0.4s ease-in-out; transition: stroke 0.4s ease-in-out; } .she-header .elementor-icon svg line { stroke: red !important; }Let me know if this works
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Icon color change on scrollHey, sorry for the delay. I have been setting up a new computer and it took longer than expected. Always does actually, should’ve seen that coming.
Anyway, I’ve got some code written for you and it’s working great for me.
Try this and let me know/* MOBILE ICON COLOR */ .she-header-yes .elementor-icon svg line { transition: stroke 0.4s ease-in-out; } .she-header .elementor-icon svg line { stroke: red !important; }Just change “red” to any color you like. In your case it looks like you would change the icon’s normal color to white, then use this code to change it to black. I also added the same color transition as the logo so everything matches.
I hope this works for you!Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Icon color change on scrollHi, thank you very much! I’m sure I can easily write you some css to do this. It’s 9pm here so I’ll get back to this in the morning. We’ll get you fixed up!
Hi, I noticed this issue when using transparent headers with the theme builder. If a header is applied to a page and has negative bottom margin or a position of absolute, while editing that page, the header will be overlapped by the page content.
I first thought this was a z-index issue with my plugin. After further testing I found that it’s not my plugin. Any header section with those attributes will be overlapped. A stock elementor header with negative bottom margin will do this without my plugin even installed.
I found a simple CSS fix to this and I hope Elementor addresses this quickly. But, for now, you can use this code./* ELEMENTOR HEADER OVERLAY IN EDITOR */ .elementor-location-header { z-index: 99 !important; }If they don’t fix it soon I can add this code to my plugin but I’d rather it just work correctly on their end.
Hope this helps!Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Logo shrink disappearing@fesoares Hi, I am working on an update to the plugin and I am trying to re-create your issue so that it can be fixed for others as well.
Would you be willing to help me test this new version of my plugin or help me duplicate this? I would really appreciate the help.
You can email me if you prefer rwattner@gmail.com
Thanks a lot!Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Header width stuck on viewport resizeGreat! Thanks for letting me know. I will add this fix to the plugin and release an update as soon as I can.
Happy holidays!Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Header width stuck on viewport resize@kuhnbnubstahl Hi, you’re very welcome, and I’m glad you like it. Sorry to hear you are having problems. This is now the second time I’ve seen this. Try this css for me
.she-header-yes { width: 100% !important; }If this works then I will add the code to the plugin and release an update since it’s no longer an isolated issue.
Let me know, thanks.Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Fade in header on scroll@zaksingle Hey Zak, sorry, it’s been crazy busy around here lately. I’m not getting emails about replies on here either for some reason. Not sure what’s going on with that.
Anyway, I saw that you had replied. I see that since your scroll distance is set to 1000px and the header isn’t sticky from the beginning it just jumps into place. Entrance animations are something I plan on adding in the future for just this type of situation. But, unfortunately, that feature isn’t available yet.
Configuring your header a little differently, or possibly some CSS, should be able to give you a smoother transition.Have you tried turning the scroll distance to 1px so it immediately becomes sticky to the top? If sticky top is on I’m not sure why it’s not initially sticky.
You can try this CSS
.she-header-yes {
position: sticky !important;
}You might need to email me so I can help further with screenshots etc. rwattner@gmail.com