Robert Wattner
Forum Replies Created
-
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Not working with containers yet, right?@fran1290 I did some extra testing before updating and found had a few small issues. I believe I’ve got everything fixed but I’m not comfortable updating without more testing. I’m free tomorrow so hopefully I can do it then. Sorry for the delay.
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Change color multiple times@mhason hey, I was wondering if this worked for you. If so, I’m going to mark this resolved. Let me know. Thanks
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Not working with containers yet, right?Hi, I have a fully functional version ready to upload to the WP repo. I’ll probably push the update Friday so I’m able to address any potential bugs over the weekend. Free time is practically non-existent for me during the week right now.
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Transitions too quickGood to hear you got it working, happy to help!
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Transitions too quickThis code should work for the image transition. Let me know
.she-header-yes .elementor-widget-image img { -webkit-transition: all 1s ease-in-out !important; -moz-transition: all 1s ease-in-out !important; -ms-transition: all 1s ease-in-out !important; -o-transition: all 1s ease-in-out !important; transition: all 1s ease-in-out !important; }Your issues could be caused by caching, yes. It also might depened on how you are editing the files, where you are putting the css… wordpress can be picky sometimes. Each environment can have it’s on quirks so it’s hard to say.
I hope this get’s you fixed up thoughForum: Plugins
In reply to: [Sticky Header Effects for Elementor] Transitions too quickHi, what transition are you trying to control exactly? I would suggest a cahing plugin even though you are on a localhost. Wp can be strange sonetimes and it might help. Also, try going to dashboard > elementor > tools > click both resync and rebuild buttons.
I was just editing the the “hide header” transition of the pro version on a localhost using vscode and has no issues. What you are doing sounds like it should be working. There is nothing in the plugin blocking this. It’s just normal css.
The “as you scroll” method can be achieved using elementor pro motion effects. Here is an article on it.
It requires more setup and some custom css but you seem plenty capable. Most of my plugin functionality is css and can be done using the methods in that article. I hope this helpsIn the future I do plan on moving a few things to css variables so I can easily add controls for them. Transition duration and easing being first on that list.
- This reply was modified 3 years, 11 months ago by Robert Wattner.
- This reply was modified 3 years, 11 months ago by Robert Wattner.
@santiagodigitaldesign1 awesome to hear, np! Sometimes that’s the best method. I’m going to mark this resolved
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Change color multiple timesHey @mhason I got it working how you need I think. First, select the header setion and go to advanced tab > motion effects and set the effects offset to 700.
https://snipboard.io/63IOpW.jpgThat is the distance for the second color change.
Next, go down to the custom css(or wherever you put your css) and add this code
/* Sticky Header Third Color */ .she-header.elementor-sticky--effects { background-color: red !important; }Change “red” to whatever color you need.
The header should now change white at the 300px you set, then again to whatever you put in the code at 700px. I hope this is what you were looking for even though it’s not an official plugin feature. Lmk if you need more help
If this helped I would really appreciate a review if you have a second. It helps me out a lot! Thanks and good luck!
Leave A Review@santiagodigitaldesign1 are you still having problems with this?
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Change color multiple times@mhason Hi, unfortunately, this isn’t a built-in feature of my plugin but I believe it could be done with elementor pro’s sticky section feature and some css. Do you have elementor pro? If so, I’ll see if I can come up with a solution for you. Let me know
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Hide Show Columns When StickyHi, this can easily be done with just a little bit of CSS. You can either use opacity, or use display: none; to “hide” things like columns, elements, etc. Opacity is self explanatory and doesn’t affect spacing or resize anything. Setting display to none will completely remove it from the page which causes things, like other columns, to shift. Also, opacity can be transitioned, display cannot.
Use the code below that suits your needs and add an ID or class(advanced tab) “hide-on-scroll” or “show-on-scroll” to any element in the header.
Code for opacity version:
/* HIDE ON SCROLL CLASS AND ID */ .she-header .hide-on-scroll .elementor-widget-container, .she-header #hide-on-scroll .elementor-widget-container { opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } /* SHOW ON SCROLL CLASS AND ID */ .she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container { opacity: 0; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } /* FULL OPACITY */ .she-header .show-on-scroll .elementor-widget-container, .she-header #show-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) .hide-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) #hide-on-scroll .elementor-widget-container, .elementor-editor-active .she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .elementor-editor-active .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container { opacity: 1 !important; -webkit-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; }Code for display none:
/* HIDE ON SCROLL CLASS AND ID */ .she-header .hide-on-scroll .elementor-widget-container, .she-header #hide-on-scroll .elementor-widget-container { display: none; } /* SHOW ON SCROLL CLASS AND ID */ .she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container { display: none; }Here is some optional extra code to style the “show-on-scroll” items to look like elementor hidden items:
/* HIDDEN ELEMENT STYLING */ .elementor-editor-active .she-header-yes:not(.she-header) .show-on-scroll .elementor-widget-container, .elementor-editor-active .she-header-yes:not(.she-header) #show-on-scroll .elementor-widget-container { display: block !important; -webkit-filter: opacity(.4) saturate(0); filter: opacity(.4) saturate(0); border: 1px solid rgba(0,0,0,.02); background: -webkit-repeating-linear-gradient( 325deg ,rgba(0,0,0,.05),rgba(0,0,0,.05) 1px,transparent 2px,transparent 9px); background-image: -webkit-repeating-linear-gradient( 325deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); background-image: -moz-repeating-linear-gradient( 325deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); background-image: -o-repeating-linear-gradient( 325deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); background-image: repeating-linear-gradient( 125deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); } .elementor-editor-active .she-header-yes:not(.she-header) .show-on-scroll:not(.elementor-element-overlay), .elementor-editor-active .she-header-yes:not(.she-header) #show-on-scroll:not(.elementor-element-overlay) { display: block !important; border: 1px solid rgba(0,0,0,.02); background: -webkit-repeating-linear-gradient( 325deg ,rgba(0,0,0,.05),rgba(0,0,0,.05) 1px,transparent 2px,transparent 9px); background-image: -webkit-repeating-linear-gradient( 325deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); background-image: -moz-repeating-linear-gradient( 325deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); background-image: -o-repeating-linear-gradient( 325deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); background-image: repeating-linear-gradient( 125deg , rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 2px, transparent 9px); }I hope this is what you needed. Let me know if I can do anything to help.
Hi, I think I know what’s happening here. The transparent header option makes the header position absolute, so no negative margins are needed, but it also adds top: 0; which is putting it above your hero section. In your case I wouldn’t use that feature and just stick with negative margins if that works.
Screenshots or a link would be useful if you still need need help figuring this out. I’m sure we can get set up how you need.Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Logo Scale Origin PointI’d be happy to help, do you have a link?
I’ll be back on my computer tomorrow, it’s 9pm here now. I think if we use the exact selector the transform is on then transfor-origin should work. I just don’t know exactly what it is off hand. Need to look at the plugin code or the dev tools to be certain.Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Sticky Header PositionNo that’s not an option the plugin offers. This can be several different ways. Logo position, container order/direction etc. If you have a link I can help with the CSS. Let me know if you’d like my help.
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Sticky Header Position@shepstar I’m going to mark this as resolved because it’s not an official plugin feature but I’m more than happy to help you with a custom solution.