Sticky Header Effects for Elementor - Version 1.5.3

Version Description

  • Fixed: Gap above mobile header bug
Download this release

Release Info

Developer rwattner
Plugin Icon 128x128 Sticky Header Effects for Elementor
Version 1.5.3
Comparing to
See all releases

Code changes from version 1.5.2 to 1.5.3

Files changed (3) hide show
  1. assets/css/she-header-style.css +66 -140
  2. readme.txt +7 -1
  3. sticky-header-effects-for-elementor.php +2 -2
assets/css/she-header-style.css CHANGED
@@ -7,186 +7,112 @@ Header Style
7
  .header {
8
  z-index: 99;
9
  width: 100%;
10
- position: inherit !important;
11
- top: inherit !important;
 
 
 
12
  }
13
 
14
- /* added box shadow transition */
15
  .she-header-yes {
16
- width: 100%;
17
- top: 0;
18
- -webkit-transition: all 0.4s ease-in-out, margin 0s, top 0s ease 0s, -webkit-box-shadow 0.4s ease-in-out !important;
19
- transition: all 0.4s ease-in-out, margin 0s, top 0s ease 0s, -webkit-box-shadow 0.4s ease-in-out !important;
20
- -o-transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out !important, top 0s ease 0s;
21
- -webkit-transition: all 0.4s ease-in-out, margin 0s, top 0s ease 0s, -webkit-box-shadow 0.4s ease-in-out !important;
22
- transition: all 0.4s ease-in-out, margin 0s, top 0s ease 0s, -webkit-box-shadow 0.4s ease-in-out !important;
23
- transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out !important, top 0s ease 0s;
24
- transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out !important, top 0s ease 0s, -webkit-box-shadow 0.4s ease-in-out !important;
25
- transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out !important, top 0s ease 0s, -webkit-box-shadow 0.4s ease-in-out !important;
 
 
 
 
 
 
26
  }
27
 
28
- /* added box shadow transition */
29
  .she-header {
30
- width: 100%;
31
  z-index: 9999;
32
  width: 100%;
33
  margin-top: 0;
34
  margin-bottom: 0;
35
  padding-top: 0;
36
  padding-bottom: 0;
37
- top: 0 !important;
38
- -webkit-transition: background-color 0.4s ease-in-out, top 2s ease 0s, -webkit-transform 0.4s ease-in-out, -webkit-box-shadow 0.4s ease-in-out;
39
- transition: background-color 0.4s ease-in-out, top 2s ease 0s, -webkit-transform 0.4s ease-in-out, -webkit-box-shadow 0.4s ease-in-out;
40
- -o-transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, top 2s ease 0s;
41
- transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, top 2s ease 0s;
42
- transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, top 2s ease 0s, -webkit-transform 0.4s ease-in-out, -webkit-box-shadow 0.4s ease-in-out;
43
- }
44
-
45
- body:not(.elementor-editor-active) .she-header {
46
- width: 100%;
47
- }
48
-
49
- .she-header:not(.elementor-sticky--active) {
50
  position: fixed !important;
 
 
 
 
 
 
51
  }
52
 
53
- /* added box shadow transition */
54
  .she-header-transparent-yes {
55
  position: absolute !important;
 
 
 
 
56
  z-index: 99;
57
- -webkit-transition: all 0.4s ease-in-out, margin 0s, -webkit-box-shadow 0.4s ease-in-out;
58
- transition: all 0.4s ease-in-out, margin 0s, -webkit-box-shadow 0.4s ease-in-out;
59
- transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out;
60
- transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out, -webkit-box-shadow 0.4s ease-in-out;
61
- -webkit-transition: all 0.4s ease-in-out, margin 0s,
62
- box-shadow 0.4s ease-in-out;
63
- -moz-transition: all 0.4s ease-in-out, margin 0s,
64
- box-shadow 0.4s ease-in-out;
65
- -ms-transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out;
66
- -o-transition: all 0.4s ease-in-out, margin 0s, box-shadow 0.4s ease-in-out;
67
  width: 100%;
68
  }
69
 
70
- body:not(.elementor-editor-active) .she-header-transparent-yes {
 
 
 
 
 
 
 
 
 
71
  width: 100%;
72
  }
73
 
74
- .she-custom-background {
75
- transition: background-color 0.4s ease-in-out;
76
- -webkit-transition: background-color 0.4s ease-in-out;
77
- -moz-transition: background-color 0.4s ease-in-out;
78
- -ms-transition: background-color 0.4s ease-in-out;
79
- -o-transition: background-color 0.4s ease-in-out;
80
- }
81
-
82
- .she-header-blur {
83
  -webkit-backdrop-filter: saturate(180%) blur(20px);
84
  backdrop-filter: saturate(180%) blur(20px);
85
- -webkit-transition: -webkit-backdrop-filter 0.2s ease-in-out 0.2s;
86
- transition: -webkit-backdrop-filter 0.2s ease-in-out 0.2s;
87
- transition: backdrop-filter 0.2s ease-in-out 0.2s;
88
- transition: backdrop-filter 0.2s ease-in-out 0.2s, -webkit-backdrop-filter 0.2s ease-in-out 0.2s;
89
- -webkit-transition: backdrop-filter 0.2s ease-in-out 0.2s;
90
- -moz-transition: backdrop-filter 0.2s ease-in-out 0.2s;
91
- -ms-transition: backdrop-filter 0.2s ease-in-out 0.2s;
92
- -o-transition: backdrop-filter 0.2s ease-in-out 0.2s;
93
  }
94
 
95
  .headerup {
96
- -webkit-transition: transform 1s ease-in-out !important;
97
- -o-transition: transform 1s ease-in-out !important;
98
- -webkit-transition: -webkit-transform 1s ease-in-out !important;
99
- transition: -webkit-transform 1s ease-in-out !important;
100
- transition: transform 1s ease-in-out !important;
101
- transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out !important;
102
- -webkit-transform: translateY(-100vh) !important;
103
- -ms-transform: translateY(-100vh) !important;
104
- transform: translateY(-100vh) !important;
105
  }
106
 
107
  .she-header-change-logo-color-yes
108
  .elementor-widget-theme-site-logo
109
  img.change-logo-color,
110
  .she-header-change-logo-color-yes .elementor-widget-theme-site-logo img,
111
- .elementor-widget-theme-site-logo img,
112
- .she-header-yes .logo img {
113
  -webkit-transition: all 0.4s ease-in-out !important;
114
  -o-transition: all 0.4s ease-in-out !important;
115
  transition: all 0.4s ease-in-out !important;
116
  }
117
 
118
  .she-header-hide-on-scroll-yes {
119
- -webkit-transition: transform 1s ease-in-out;
120
- -o-transition: transform 1s ease-in-out;
121
- -webkit-transition: -webkit-transform 1s ease-in-out;
122
- transition: -webkit-transform 1s ease-in-out;
123
- transition: transform 1s ease-in-out;
124
- transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
125
- }
126
-
127
- .she-header.she-header-change-logo-image
128
- .elementor-widget-theme-site-logo
129
- img {
130
- -webkit-animation-duration: 0.4s;
131
- animation-duration: 0.4s;
132
- -webkit-animation-fill-mode: both;
133
- animation-fill-mode: both;
134
- -webkit-animation-name: fadeIn;
135
- animation-name: fadeIn;
136
- }
137
-
138
- /* Custom Hamburger Menu */
139
-
140
- .she-header-yes .elementor-menu-toggle:before,
141
- .she-header-yes .elementor-menu-toggle:after,
142
- .she-header-yes .elementor-menu-toggle i:after {
143
- -webkit-transition: width 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65), -webkit-transform 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
144
- transition: width 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65), -webkit-transform 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
145
- -o-transition: transform 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65), width 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
146
- transition: transform 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65), width 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
147
- transition: transform 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65), width 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65), -webkit-transform 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
148
- }
149
-
150
- .she-header-yes .elementor-menu-toggle {
151
- position: relative;
152
- -webkit-transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;
153
- -o-transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;
154
- transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out;
155
  }
156
 
157
- .she-header-yes .elementor-menu-toggle.elementor-active:before {
158
- -webkit-transform: translate(-50%,-50%) rotate(-45deg);
159
- -ms-transform: translate(-50%,-50%) rotate(-45deg);
160
- transform: translate(-50%,-50%) rotate(-45deg);
161
- }
162
- .she-header-yes .elementor-menu-toggle:after{
163
- -webkit-transform: translate(-50%,calc(-50% - 0.25em));
164
- -ms-transform: translate(-50%,calc(-50% - 0.25em));
165
- transform: translate(-50%,calc(-50% - 0.25em));
166
- }
167
- .she-header-yes .elementor-menu-toggle.elementor-active:after {
168
- -webkit-transform: translate(-50%,-50%) rotate(45deg);
169
- -ms-transform: translate(-50%,-50%) rotate(45deg);
170
- transform: translate(-50%,-50%) rotate(45deg);
171
- }
172
- .she-header-yes .elementor-menu-toggle i:after{
173
- -webkit-transform: translate(-50%,-50%);
174
- -ms-transform: translate(-50%,-50%);
175
- transform: translate(-50%,-50%);
176
- }
177
-
178
- /* .admin-bar .she-header-transparent-sticky-yes,
179
- .admin-bar .she-header-transparent-yes,
180
- .admin-bar .she-header-yes, */
181
- .admin-bar .she-header {
182
- top: 46px !important;
183
- }
184
-
185
- @media screen and (min-width: 783px) {
186
- /* .admin-bar .she-header-transparent-sticky-yes,
187
- .admin-bar .she-header-transparent-yes,
188
- .admin-bar .she-header-yes, */
189
- .admin-bar .she-header {
190
- top: 32px !important;
191
- }
192
- }
7
  .header {
8
  z-index: 99;
9
  width: 100%;
10
+ transition: all 0.4s ease-in-out;
11
+ -moz-transition: all 0.4s ease-in-out;
12
+ -ms-transition: all 0.4s ease-in-out;
13
+ -webkit-transition: all 0.4s ease-in-out;
14
+ -o-transition: all 0.4s ease-in-out;
15
  }
16
 
 
17
  .she-header-yes {
18
+ -webkit-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
19
+ -moz-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
20
+ -ms-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
21
+ -o-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
22
+ transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
23
+ }
24
+
25
+
26
+
27
+ @media screen and (min-width: 783px) {
28
+ /* .admin-bar .she-header-transparent-sticky-yes,
29
+ .admin-bar .she-header-transparent-yes,
30
+ .admin-bar .she-header-yes, */
31
+ .admin-bar .she-header {
32
+ top: 32px !important;
33
+ }
34
  }
35
 
 
36
  .she-header {
 
37
  z-index: 9999;
38
  width: 100%;
39
  margin-top: 0;
40
  margin-bottom: 0;
41
  padding-top: 0;
42
  padding-bottom: 0;
43
+ position: -webkit-sticky;
 
 
 
 
 
 
 
 
 
 
 
 
44
  position: fixed !important;
45
+ top: 0 !important;
46
+ -webkit-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
47
+ -moz-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
48
+ -ms-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
49
+ -o-transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
50
+ transform: all 0.4 sease-in-out, height 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out !important;
51
  }
52
 
 
53
  .she-header-transparent-yes {
54
  position: absolute !important;
55
+ -webkit-transition: top 0s !important;
56
+ -o-transition: top 0s !important;
57
+ transition: top 0s !important;
58
+ background-color: rgba(0, 0, 0, 0) !important;
59
  z-index: 99;
60
+ -webkit-transition: all 0.4s ease-in-out;
61
+ -o-transition: all 0.4s ease-in-out;
62
+ transition: all 0.4s ease-in-out;
 
 
 
 
 
 
 
63
  width: 100%;
64
  }
65
 
66
+ .elementor-editor-active .she-header-transparent-yes {
67
+ position: absolute !important;
68
+ -webkit-transition: top 0s !important;
69
+ -o-transition: top 0s !important;
70
+ transition: top 0s !important;
71
+ background-color: rgba(0, 0, 0, 0) !important;
72
+ z-index: 99;
73
+ -webkit-transition: all 0.4s ease-in-out;
74
+ -o-transition: all 0.4s ease-in-out;
75
+ transition: all 0.4s ease-in-out;
76
  width: 100%;
77
  }
78
 
79
+ .she-header.she-blur-yes {
 
 
 
 
 
 
 
 
80
  -webkit-backdrop-filter: saturate(180%) blur(20px);
81
  backdrop-filter: saturate(180%) blur(20px);
 
 
 
 
 
 
 
 
82
  }
83
 
84
  .headerup {
85
+ -webkit-transition: transform 0.4s ease-in-out !important;
86
+ -o-transition: transform 0.4s ease-in-out !important;
87
+ -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
88
+ transition: -webkit-transform 0.4s ease-in-out !important;
89
+ transition: transform 0.4s ease-in-out !important;
90
+ transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out !important;
91
+ -webkit-transform: translateY(-110vh) !important;
92
+ -ms-transform: translateY(-110vh) !important;
93
+ transform: translateY(-110vh) !important;
94
  }
95
 
96
  .she-header-change-logo-color-yes
97
  .elementor-widget-theme-site-logo
98
  img.change-logo-color,
99
  .she-header-change-logo-color-yes .elementor-widget-theme-site-logo img,
100
+ .elementor-widget-theme-site-logo img, .she-header-yes .logo img
101
+ {
102
  -webkit-transition: all 0.4s ease-in-out !important;
103
  -o-transition: all 0.4s ease-in-out !important;
104
  transition: all 0.4s ease-in-out !important;
105
  }
106
 
107
  .she-header-hide-on-scroll-yes {
108
+ -webkit-transition: transform 0.4s ease-in-out !important;
109
+ -o-transition: transform 0.4s ease-in-out !important;
110
+ -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
111
+ transition: -webkit-transform 0.4s ease-in-out !important;
112
+ transition: transform 0.4s ease-in-out !important;
113
+ transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  }
115
 
116
+ /* .elementor-document-handle {
117
+ z-index: 9999999999999 !important;
118
+ } */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
readme.txt CHANGED
@@ -6,7 +6,7 @@ Tags: Elementor, Elementor Page Builder, Elements, Elementor Add-ons, Add-ons, P
6
  Requires at least: 4.9.0
7
  Tested up to: 6.0
8
  Requires PHP: 5.4
9
- Stable tag: 1.5.2
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
 
@@ -91,6 +91,9 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
91
 
92
  == Changelog ==
93
 
 
 
 
94
  = 1.5.2 =
95
  - Fixed: Gap above header bug
96
 
@@ -187,6 +190,9 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
187
 
188
  == Upgrade Notice ==
189
 
 
 
 
190
  = 1.5.2 =
191
  Fixed: Gap above header bug
192
 
6
  Requires at least: 4.9.0
7
  Tested up to: 6.0
8
  Requires PHP: 5.4
9
+ Stable tag: 1.5.3
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
 
91
 
92
  == Changelog ==
93
 
94
+ = 1.5.3 =
95
+ - Fixed: Gap above mobile header bug
96
+
97
  = 1.5.2 =
98
  - Fixed: Gap above header bug
99
 
190
 
191
  == Upgrade Notice ==
192
 
193
+ = 1.5.3 =
194
+ Fixed: Gap above mobile header bug
195
+
196
  = 1.5.2 =
197
  Fixed: Gap above header bug
198
 
sticky-header-effects-for-elementor.php CHANGED
@@ -3,7 +3,7 @@
3
  * Plugin Name: Sticky Header Effects for Elementor
4
  * Plugin URI: https://stickyheadereffects.com
5
  * Description: Options and features that extend Elementor Pro's sticky header capabilities.
6
- * Version: 1.5.2
7
  * Author: Rwattner
8
  * Author URI: https://stickyheadereffects.com
9
  * Requires at least: 4.9.0
@@ -19,7 +19,7 @@
19
 
20
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
 
22
- define( 'SHE_HEADER_VERSION', '1.5.2' );
23
  define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.4.8' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );
3
  * Plugin Name: Sticky Header Effects for Elementor
4
  * Plugin URI: https://stickyheadereffects.com
5
  * Description: Options and features that extend Elementor Pro's sticky header capabilities.
6
+ * Version: 1.5.3
7
  * Author: Rwattner
8
  * Author URI: https://stickyheadereffects.com
9
  * Requires at least: 4.9.0
19
 
20
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
 
22
+ define( 'SHE_HEADER_VERSION', '1.5.3' );
23
  define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.4.8' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );