Sticky Header Effects for Elementor - Version 1.4.1

Version Description

Fixed: Bugs

Download this release

Release Info

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

Code changes from version 1.3.2 to 1.4.1

Files changed (5) hide show
  1. assets/css/she-header-style.css +89 -63
  2. assets/js/she-header.js +237 -173
  3. modules/transparent/module.php +642 -356
  4. readme.txt +47 -8
  5. sticky-header-effects-for-elementor.php +5 -7
assets/css/she-header-style.css CHANGED
@@ -4,83 +4,109 @@ Header Style
4
 
5
  -------------------------------------------------------------------*/
6
 
7
- .header {
8
-
9
- z-index:99;
10
-
11
- width: 100%;
12
-
13
-
14
-
15
  }
16
 
17
-
18
-
19
- .she-header{
20
-
21
- background-color: rgba(255, 255, 255, 0.5);
22
-
23
- z-index:99;
24
-
25
- width: 100%;
26
-
27
- margin-top:0;
28
-
29
- margin-bottom:0;
30
-
31
- padding-top:0;
32
-
33
- padding-bottom:0;
34
-
35
- position:fixed;
36
-
37
- top:0;
38
-
39
- -webkit-transition: all 0.4s ease-in-out;
40
-
41
- -moz-transition: all 0.4s ease-in-out;
42
-
43
- -o-transition: all 0.4s ease-in-out;
44
-
45
- -ms-transition: all 0.4s ease-in-out;
46
-
47
- transition: all 0.4s ease-in-out;
48
-
49
-
50
-
51
  }
52
 
 
 
 
53
 
54
-
55
- .she-header-transparent-yes{
56
-
57
- position:fixed;
58
-
59
- background-color: rbga(0,0,0,0) !important;
60
-
61
- z-index: 99;
62
-
63
  width: 100%;
 
 
 
 
 
 
 
 
64
 
 
 
 
 
 
 
 
65
  -webkit-transition: all 0.4s ease-in-out;
66
-
67
- -moz-transition: all 0.4s ease-in-out;
68
-
69
- -o-transition: all 0.4s ease-in-out;
70
-
71
- -ms-transition: all 0.4s ease-in-out;
72
-
73
- transition: all 0.4s ease-in-out;
74
-
75
  }
76
 
77
-
78
-
79
  .elementor-editor-active .she-header-transparent-yes {
 
 
 
 
 
 
 
 
 
 
 
80
 
81
- position:relative;
 
 
 
82
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
 
 
 
 
 
 
 
 
 
 
 
85
 
 
 
 
 
 
 
 
 
86
 
 
 
 
4
 
5
  -------------------------------------------------------------------*/
6
 
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
+ transition: all 0.4s ease-in-out;
19
+ -webkit-transition: all 0.4s ease-in-out;
20
+ -moz-transition: all 0.4s ease-in-out;
21
+ -ms-transition: all 0.4s ease-in-out;
22
+ -o-transition: all 0.4s ease-in-out;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
+ .logged-in .she-header {
26
+ top: 32px !important;
27
+ }
28
 
29
+ .she-header {
30
+ -webkit-transition: transform 0.4s ease-in-out !important;
31
+ -o-transition: transform 0.4s ease-in-out !important;
32
+ -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
33
+ transition: -webkit-transform 0.4s ease-in-out !important;
34
+ transition: transform 0.4s ease-in-out !important;
35
+ transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out !important;
36
+ z-index: 9999;
 
37
  width: 100%;
38
+ margin-top: 0;
39
+ margin-bottom: 0;
40
+ padding-top: 0;
41
+ padding-bottom: 0;
42
+ position: -webkit-sticky;
43
+ position: fixed !important;
44
+ top: 0 !important;
45
+ }
46
 
47
+ .she-header-transparent-yes {
48
+ position: absolute !important;
49
+ -webkit-transition: top 0s !important;
50
+ -o-transition: top 0s !important;
51
+ transition: top 0s !important;
52
+ background-color: rgba(0, 0, 0, 0) !important;
53
+ z-index: 99;
54
  -webkit-transition: all 0.4s ease-in-out;
55
+ -o-transition: all 0.4s ease-in-out;
56
+ transition: all 0.4s ease-in-out;
57
+ width: 100%;
 
 
 
 
 
 
58
  }
59
 
 
 
60
  .elementor-editor-active .she-header-transparent-yes {
61
+ position: absolute !important;
62
+ -webkit-transition: top 0s !important;
63
+ -o-transition: top 0s !important;
64
+ transition: top 0s !important;
65
+ background-color: rgba(0, 0, 0, 0) !important;
66
+ z-index: 99;
67
+ -webkit-transition: all 0.4s ease-in-out;
68
+ -o-transition: all 0.4s ease-in-out;
69
+ transition: all 0.4s ease-in-out;
70
+ width: 100%;
71
+ }
72
 
73
+ .she-header.she-blur-yes {
74
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
75
+ backdrop-filter: saturate(180%) blur(20px);
76
+ }
77
 
78
+ .headerup {
79
+ -webkit-transition: transform 0.4s ease-in-out !important;
80
+ -o-transition: transform 0.4s ease-in-out !important;
81
+ -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
82
+ transition: -webkit-transform 0.4s ease-in-out !important;
83
+ transition: transform 0.4s ease-in-out !important;
84
+ transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out !important;
85
+ -webkit-transform: translateY(-110vh) !important;
86
+ -ms-transform: translateY(-110vh) !important;
87
+ transform: translateY(-110vh) !important;
88
  }
89
 
90
+ .she-header-change-logo-color-yes
91
+ .elementor-widget-theme-site-logo
92
+ img.change-logo-color,
93
+ .she-header-change-logo-color-yes .elementor-widget-theme-site-logo img,
94
+ .elementor-widget-theme-site-logo img, .she-header-yes .logo img
95
+ {
96
+ -webkit-transition: all 0.4s ease-in-out !important;
97
+ -o-transition: all 0.4s ease-in-out !important;
98
+ transition: all 0.4s ease-in-out !important;
99
+ }
100
 
101
+ .she-header-hide-on-scroll-yes {
102
+ -webkit-transition: transform 0.4s ease-in-out !important;
103
+ -o-transition: transform 0.4s ease-in-out !important;
104
+ -webkit-transition: -webkit-transform 0.4s ease-in-out !important;
105
+ transition: -webkit-transform 0.4s ease-in-out !important;
106
+ transition: transform 0.4s ease-in-out !important;
107
+ transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out !important;
108
+ }
109
 
110
+ /* .elementor-document-handle {
111
+ z-index: 9999999999999 !important;
112
+ } */
assets/js/she-header.js CHANGED
@@ -1,173 +1,237 @@
1
- var $j = jQuery.noConflict();
2
-
3
- $j( window ).on( 'load', function() {
4
- "use strict";
5
- // She header
6
- sheHeader();
7
- } );
8
-
9
-
10
- /* ==============================================
11
- HEADER EFFECTS
12
- ============================================== */
13
-
14
-
15
- function sheHeader() {
16
-
17
- var header = $j('.she-header-yes'),
18
- container = $j('.she-header-yes .elementor-container'),
19
- header_elementor = $j('.elementor-edit-mode .she-header-yes'),
20
- header_logo = $j('.she-header-yes .elementor-container img'),
21
- data_settings = header.data('settings');
22
-
23
- if ( typeof data_settings != 'undefined' ) {
24
- var responsive_settings = data_settings["transparent_on"];
25
- var width = $j(window).width(),
26
- header_height= header.height(),
27
- logo_width = header_logo.width(),
28
- logo_height = header_logo.height() ;
29
- }
30
-
31
- // Check responsive is enabled
32
- if( typeof width != 'undefined' && width) {
33
- if( width >= 1025 ) {
34
- var enabled = "desktop";
35
- }else if (width > 767 && width < 1025 ) {
36
- var enabled = "tablet";
37
- }else if (width <= 767 ) {
38
- var enabled = "mobile";
39
- }
40
- }
41
-
42
- console.log($j.inArray(enabled, responsive_settings));
43
-
44
-
45
- if ($j.inArray(enabled, responsive_settings)!='-1') {
46
- // height shrink
47
-
48
- var scroll_distance = data_settings["scroll_distance"];
49
- var transparent_header = data_settings["transparent_header_show"];
50
- var background = data_settings["background"];
51
- var bottom_border_color = data_settings["custom_bottom_border_color"],
52
- bottom_border_view = data_settings["bottom_border"],
53
- bottom_border_width = data_settings["custom_bottom_border_width"];
54
-
55
- var shrink_header = data_settings["shrink_header"],
56
- data_height = data_settings["custom_height_header"],
57
- data_height_tablet = data_settings["custom_height_header_tablet"],
58
- data_height_mobile = data_settings["custom_height_header_mobile"];
59
-
60
- var shrink_logo = data_settings["shrink_header_logo"],
61
- data_logo_height = data_settings["custom_height_header_logo"],
62
- data_logo_height_tablet = data_settings["custom_height_header_logo_tablet"],
63
- data_logo_height_mobile = data_settings["custom_height_header_logo_mobile"];
64
-
65
- // header height shrink
66
- if( typeof data_height != 'undefined' && data_height) {
67
- if( width >= 1025 ) {
68
- var shrink_height = data_height["size"];
69
- }else if (width > 767 && width < 1025 ) {
70
- var shrink_height = data_height_tablet["size"];
71
- if(shrink_height == ''){
72
- shrink_height = data_height["size"];
73
- }
74
- }else if (width <= 767 ) {
75
- var shrink_height = data_height_mobile["size"];
76
- if(shrink_height == ''){
77
- shrink_height = data_height["size"];
78
- }
79
- }
80
- }
81
-
82
- // logo height shrink
83
-
84
- if( typeof data_logo_height != 'undefined' && data_logo_height) {
85
- if( width >= 1025 ) {
86
-
87
- var shrink_logo_height = data_logo_height["size"];
88
- if(shrink_logo_height == ''){
89
- shrink_logo_height = shrink_height;
90
- }
91
- var percent = parseInt(shrink_logo_height)/parseInt(header_height),
92
- width = logo_width*percent,
93
- height = logo_height*percent;
94
-
95
- }else if (width > 767 && width < 1025 ) {
96
-
97
- var shrink_logo_height = data_logo_height_tablet["size"];
98
- if(shrink_logo_height == ''){
99
- shrink_logo_height = data_logo_height["size"];
100
- if(shrink_logo_height == ''){
101
- shrink_logo_height = shrink_height;
102
- }
103
- }
104
- var percent = parseInt(shrink_logo_height)/parseInt(header_height),
105
- width = logo_width*percent,
106
- height = logo_height*percent;
107
-
108
- }else if (width <= 767 ) {
109
-
110
- var shrink_logo_height = data_logo_height_mobile["size"];
111
- if(shrink_logo_height == ''){
112
- shrink_logo_height = data_logo_height["size"];
113
- if(shrink_logo_height == ''){
114
- shrink_logo_height = shrink_height;
115
- }
116
- }
117
-
118
- var percent = parseInt(shrink_logo_height)/parseInt(header_height),
119
- width = logo_width*percent,
120
- height = logo_height*percent;
121
- }
122
- }
123
-
124
- // border bottom
125
- if( typeof bottom_border_width != 'undefined' && bottom_border_width) {
126
- var bottom_border = bottom_border_width["size"] + "px solid " + bottom_border_color;
127
- }
128
-
129
- // scroll function
130
- $j(window).scroll(function() {
131
- var scroll = $j(window).scrollTop();
132
-
133
- if (header_elementor) {
134
- header_elementor.css("position", "relative");
135
- }
136
-
137
- if (scroll >= scroll_distance["size"]) {
138
- header.removeClass('header').addClass("she-header");
139
- header.css("background-color", background);
140
- header.css("border-bottom", bottom_border);
141
- header.removeClass('she-header-transparent-yes');
142
-
143
- if( shrink_header == "yes" ) {
144
- header.css({"padding-top":"0", "padding-bottom":"0", "margin-top":"0", "margin-bottom":"0"});
145
- container.css({"min-height": shrink_height, "transition": "all 0.4s ease-in-out", "-webkit-transition": "all 0.4s ease-in-out", "-moz-transition": "all 0.4s ease-in-out"});
146
-
147
- }
148
-
149
- if( shrink_logo == "yes" ) {
150
- header_logo.css({"width": width, "transition": "all 0.4s ease-in-out", "-webkit-transition": "all 0.4s ease-in-out", "-moz-transition": "all 0.4s ease-in-out"});
151
-
152
- }
153
-
154
- } else {
155
- header.removeClass("she-header").addClass('header');
156
- header.css("background-color", "");
157
- header.css("border-bottom", "");
158
-
159
- if(transparent_header == "yes" ){
160
- header.addClass('she-header-transparent-yes');
161
- }
162
- if( shrink_header == "yes" ) {
163
- header.css({"padding-top":"", "padding-bottom":"", "margin-top":"", "margin-bottom":""});
164
- container.css("min-height", "");
165
- }
166
- if( shrink_logo == "yes" ) {
167
- header_logo.css({"height":"", "width":""});
168
- }
169
- }
170
- });
171
- }
172
-
173
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ var $j = jQuery.noConflict();
2
+
3
+ $j( document ).ready( function() {
4
+ "use strict";
5
+ // She header
6
+ sheHeader();
7
+ } );
8
+
9
+
10
+ /* ==============================================
11
+ HEADER EFFECTS
12
+ ============================================== */
13
+
14
+
15
+ function sheHeader() {
16
+
17
+ var header = $j('.she-header-yes'),
18
+ container = $j('.she-header-yes .elementor-container'),
19
+ header_elementor = $j('.elementor-edit-mode .she-header-yes'),
20
+ header_logo = $j('.she-header-yes .elementor-widget-theme-site-logo img, .she-header-yes .elementor-widget-image img'),
21
+ data_settings = header.data('settings');
22
+
23
+ if ( typeof data_settings != 'undefined' ) {
24
+ var responsive_settings = data_settings["transparent_on"];
25
+ var width = $j(window).width(),
26
+ header_height= header.height(),
27
+ logo_width = header_logo.width(),
28
+ logo_height = header_logo.height() ;
29
+ }
30
+
31
+ // Check responsive is enabled
32
+ if( typeof width != 'undefined' && width) {
33
+ if( width >= 1025 ) {
34
+ var enabled = "desktop";
35
+ }else if (width > 767 && width < 1025 ) {
36
+ var enabled = "tablet";
37
+ }else if (width <= 767 ) {
38
+ var enabled = "mobile";
39
+ }
40
+ }
41
+
42
+ console.log($j.inArray(enabled, responsive_settings));
43
+
44
+ if ($j.inArray(enabled, responsive_settings)!='-1') {
45
+
46
+ var scroll_distance = data_settings["scroll_distance"];
47
+ var transparent_header = data_settings["transparent_header_show"];
48
+ var background = data_settings["background"];
49
+ var bottom_border_color = data_settings["custom_bottom_border_color"],
50
+ bottom_border_view = data_settings["bottom_border"],
51
+ bottom_border_width = data_settings["custom_bottom_border_width"];
52
+
53
+ var shrink_header = data_settings["shrink_header"],
54
+ data_height = data_settings["custom_height_header"],
55
+ data_height_tablet = data_settings["custom_height_header_tablet"],
56
+ data_height_mobile = data_settings["custom_height_header_mobile"];
57
+
58
+ var shrink_logo = data_settings["shrink_header_logo"],
59
+ data_logo_height = data_settings["custom_height_header_logo"],
60
+ data_logo_height_tablet = data_settings["custom_height_header_logo_tablet"],
61
+ data_logo_height_mobile = data_settings["custom_height_header_logo_mobile"];
62
+
63
+ var change_logo_color = data_settings["change_logo_color"];
64
+
65
+ var blur_bg = data_settings["blur_bg"];
66
+
67
+ var scroll_distance_hide_header = data_settings["scroll_distance_hide_header"];
68
+
69
+ // add transparent class
70
+ if(transparent_header == "yes" ){
71
+ header.addClass('she-header-transparent-yes');
72
+ }
73
+
74
+ // header height shrink
75
+ if( typeof data_height != 'undefined' && data_height) {
76
+ if( width >= 1025 ) {
77
+ var shrink_height = data_height["size"];
78
+ }else if (width > 767 && width < 1025 ) {
79
+ var shrink_height = data_height_tablet["size"];
80
+ if(shrink_height == ''){
81
+ shrink_height = data_height["size"];
82
+ }
83
+ }else if (width <= 767 ) {
84
+ var shrink_height = data_height_mobile["size"];
85
+ if(shrink_height == ''){
86
+ shrink_height = data_height["size"];
87
+ }
88
+ }
89
+ }
90
+
91
+ // logo height shrink
92
+
93
+ if( typeof data_logo_height != 'undefined' && data_logo_height) {
94
+ if( width >= 1025 ) {
95
+
96
+ var shrink_logo_height = data_logo_height["size"];
97
+ if(shrink_logo_height == ''){
98
+ shrink_logo_height = shrink_height;
99
+
100
+ var percent = parseInt(shrink_logo_height)/parseInt(header_height),
101
+ width = logo_width*percent,
102
+ height = logo_height*percent;
103
+ }else{
104
+ width = logo_width*shrink_logo_height/100,
105
+ height = logo_height*shrink_logo_height/100;
106
+ }
107
+
108
+ }else if (width > 767 && width < 1025 ) {
109
+
110
+ var shrink_logo_height = data_logo_height_tablet["size"];
111
+ if(shrink_logo_height == ''){
112
+ shrink_logo_height = data_logo_height["size"];
113
+ if(shrink_logo_height == ''){
114
+ shrink_logo_height = shrink_height;
115
+
116
+ var percent = parseInt(shrink_logo_height)/parseInt(header_height),
117
+ width = logo_width*percent,
118
+ height = logo_height*percent;
119
+ }else{
120
+ width = logo_width*shrink_logo_height/100,
121
+ height = logo_height*shrink_logo_height/100;
122
+
123
+ }
124
+ }
125
+
126
+
127
+ }else if (width <= 767 ) {
128
+
129
+ var shrink_logo_height = data_logo_height_mobile["size"];
130
+ if(shrink_logo_height == ''){
131
+ shrink_logo_height = data_logo_height["size"];
132
+ if(shrink_logo_height == ''){
133
+ shrink_logo_height = shrink_height;
134
+
135
+ var percent = parseInt(shrink_logo_height)/parseInt(header_height),
136
+ width = logo_width*percent,
137
+ height = logo_height*percent;
138
+ }else{
139
+ width = logo_width*shrink_logo_height/100,
140
+ height = logo_height*shrink_logo_height/100;
141
+ }
142
+ }
143
+
144
+
145
+
146
+ }
147
+ }
148
+
149
+ // border bottom
150
+ if( typeof bottom_border_width != 'undefined' && bottom_border_width) {
151
+ var bottom_border = bottom_border_width["size"] + "px solid " + bottom_border_color;
152
+ }
153
+
154
+
155
+ // hide header on scroll
156
+ if( typeof scroll_distance_hide_header != 'undefined' && scroll_distance_hide_header) {
157
+
158
+ var mywindow = $j(window);
159
+ var mypos = mywindow.scrollTop();
160
+
161
+ mywindow.scroll(function() {
162
+ if (mypos > scroll_distance_hide_header["size"]) {
163
+ if(mywindow.scrollTop() > mypos)
164
+ {
165
+ header.addClass('headerup');
166
+ }else{
167
+ header.removeClass('headerup');
168
+ }
169
+ }
170
+ mypos = mywindow.scrollTop();
171
+ });
172
+ }
173
+
174
+ // scroll function
175
+ $j(window).on("load scroll",function(e){
176
+ var scroll = $j(window).scrollTop();
177
+
178
+ if (header_elementor) {
179
+ header_elementor.css("position", "relative");
180
+ }
181
+
182
+ if (scroll >= scroll_distance["size"]) {
183
+ header.removeClass('header').addClass("she-header");
184
+ header.css("background-color", background);
185
+ header.css("border-bottom", bottom_border);
186
+ header.removeClass('she-header-transparent-yes');
187
+
188
+ if( shrink_header == "yes" ) {
189
+ header.css({"padding-top":"0", "padding-bottom":"0", "margin-top":"0", "margin-bottom":"0"});
190
+ container.css({"min-height": shrink_height, "transition": "all 0.4s ease-in-out", "-webkit-transition": "all 0.4s ease-in-out", "-moz-transition": "all 0.4s ease-in-out"});
191
+
192
+ }
193
+
194
+ if( shrink_logo == "yes" ) {
195
+ header_logo.css({"width": width, "transition": "all 0.4s ease-in-out", "-webkit-transition": "all 0.4s ease-in-out", "-moz-transition": "all 0.4s ease-in-out"});
196
+
197
+ }
198
+
199
+ if( change_logo_color == "yes" ) {
200
+ header_logo.addClass("change-logo-color");
201
+
202
+ }
203
+
204
+ if( blur_bg == "yes" ) {
205
+ header.css({"backdrop-filter": "saturate(180%) blur(20px)", "-webkit-backdrop-filter": "saturate(180%) blur(20px)"});
206
+
207
+ }
208
+
209
+ } else {
210
+ header.removeClass("she-header").addClass('header');
211
+ header.css("background-color", "");
212
+ header.css("border-bottom", "");
213
+
214
+ if(transparent_header == "yes" ){
215
+ header.addClass('she-header-transparent-yes');
216
+ }
217
+ if( shrink_header == "yes" ) {
218
+ header.css({"padding-top":"", "padding-bottom":"", "margin-top":"", "margin-bottom":""});
219
+ container.css("min-height", "");
220
+ }
221
+ if( shrink_logo == "yes" ) {
222
+ header_logo.css({"height":"", "width":""});
223
+ }
224
+ if( change_logo_color == "yes" ) {
225
+ header_logo.removeClass("change-logo-color");
226
+
227
+ }
228
+ if( blur_bg == "yes" ) {
229
+ header.css({"backdrop-filter": "", "-webkit-backdrop-filter": ""});
230
+ }
231
+ }
232
+
233
+
234
+ });
235
+ }
236
+
237
+ };
modules/transparent/module.php CHANGED
@@ -1,356 +1,642 @@
1
- <?php
2
- namespace SheHeader\Modules\Transparent;
3
-
4
- use Elementor;
5
- use Elementor\Plugin;
6
- use Elementor\Controls_Manager;
7
- use Elementor\Controls_Stack;
8
- use SheHeader\Base\Module_Base;
9
-
10
- if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
11
-
12
- class Module extends Module_Base {
13
-
14
- public function __construct() {
15
- parent::__construct();
16
-
17
- $this->add_actions();
18
- }
19
-
20
- public function get_name() {
21
- return 'transparent';
22
- }
23
-
24
- public function register_controls( Controls_Stack $element ) {
25
- $element->start_controls_section(
26
- 'section_sticky_header_effect',
27
- [
28
- 'label' => __( 'Sticky Header Effects', 'she-header' ),
29
- 'tab' => Controls_Manager::TAB_ADVANCED,
30
- ]
31
- );
32
-
33
- $element->add_control(
34
- 'transparent',
35
- [
36
- 'label' => __( 'Enable', 'she-header' ),
37
- 'type' => Controls_Manager::SWITCHER,
38
- 'label_on' => __( 'On', 'she-header' ),
39
- 'label_off' => __( 'Off', 'bew-header' ),
40
- 'return_value' => 'yes',
41
- 'default' => '',
42
- 'frontend_available' => true,
43
- 'prefix_class' => 'she-header-'
44
- ]
45
- );
46
-
47
- $element->add_control(
48
- 'sticky_header_notice',
49
- [
50
- 'raw' => __( 'IMPORTANT: Sticky Header Effects is best used with Elementor Pro sticky option enabled.', 'she-header' ),
51
- 'type' => Controls_Manager::RAW_HTML,
52
- 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
53
- 'condition' => [
54
-
55
- 'transparent!' => '',
56
- ],
57
- ]
58
- );
59
-
60
- $element->add_control(
61
- 'transparent_on',
62
- [
63
- 'label' => __( 'Enable On', 'she-header' ),
64
- 'type' => Controls_Manager::SELECT2,
65
- 'multiple' => true,
66
- 'label_block' => 'true',
67
- 'default' => [ 'desktop', 'tablet', 'mobile' ],
68
- 'options' => [
69
- 'desktop' => __( 'Desktop', 'she-header' ),
70
- 'tablet' => __( 'Tablet', 'she-header' ),
71
- 'mobile' => __( 'Mobile', 'she-header' ),
72
- ],
73
- 'condition' => [
74
- 'transparent!' => ''
75
- ],
76
- 'render_type' => 'none',
77
- 'frontend_available' => true,
78
- ]
79
- );
80
-
81
- $element->add_responsive_control(
82
- 'scroll_distance',
83
- [
84
- 'label' => __( 'Scroll Distance (px)', 'she-header' ),
85
- 'type' => Controls_Manager::SLIDER,
86
- 'default' => [
87
- 'size' => 60,
88
- ],
89
- 'range' => [
90
- 'px' => [
91
- 'min' => 0,
92
- 'max' => 500,
93
- ],
94
- ],
95
- 'size_units' => [ 'px'],
96
- 'description' => __( 'Choose the scroll distance to enable Sticky Header Effects', 'she-header' ),
97
- 'frontend_available' => true,
98
- 'condition' => [
99
- 'transparent!' => '',
100
- ],
101
- ]
102
- );
103
-
104
- $element->add_control(
105
- 'settings_notice',
106
- [
107
- 'raw' => __( 'Remember: The settings below will not be applied until the page is scrolled the distance set above', 'she-header' ),
108
- 'type' => Controls_Manager::RAW_HTML,
109
- 'content_classes' => 'elementor-descriptor',
110
- 'condition' => [
111
- 'transparent!' => '',
112
- ],
113
- ]
114
- );
115
-
116
- $element->add_control(
117
- 'transparent_header_show',
118
- [
119
- 'label' => __( 'Transparent Header', 'she-header' ),
120
- 'type' => Controls_Manager::SWITCHER,
121
- 'separator' => 'before',
122
- 'label_on' => __( 'On', 'she-header' ),
123
- 'label_off' => __( 'Off', 'bew-header' ),
124
- 'return_value' => 'yes',
125
- 'default' => '',
126
- 'frontend_available' => true,
127
- 'condition' => [
128
- 'transparent!' => '',
129
- ],
130
- 'description' => __( 'Initial transparent header', 'she-header' ),
131
- 'prefix_class' => 'she-header-transparent-'
132
- ]
133
- );
134
-
135
- $element->add_control(
136
- 'background_show',
137
- [
138
- 'label' => __( 'Header Background', 'she-header' ),
139
- 'type' => Controls_Manager::SWITCHER,
140
- 'separator' => 'before',
141
- 'label_on' => __( 'On', 'she-header' ),
142
- 'label_off' => __( 'Off', 'bew-header' ),
143
- 'return_value' => 'yes',
144
- 'default' => '',
145
- 'frontend_available' => true,
146
- 'condition' => [
147
- 'transparent!' => '',
148
- ],
149
- 'description' => __( 'Choose background color after scrolling', 'she-header' ),
150
- ]
151
- );
152
-
153
- $element->add_control(
154
- 'background',
155
- [
156
- 'label' => __( 'Color', 'she-header' ),
157
- 'type' => Controls_Manager::COLOR,
158
- 'condition' => [
159
- 'background_show' => 'yes',
160
- 'transparent!' => '',
161
- ],
162
- 'render_type' => 'none',
163
- 'frontend_available' => true,
164
- ]
165
- );
166
-
167
- $element->add_control(
168
- 'bottom_border',
169
- [
170
- 'label' => __( 'Bottom Border', 'she-header' ),
171
- 'type' => Controls_Manager::SWITCHER,
172
- 'separator' => 'before',
173
- 'label_on' => __( 'On', 'she-header' ),
174
- 'label_off' => __( 'Off', 'she-header' ),
175
- 'return_value' => 'yes',
176
- 'default' => '',
177
- 'frontend_available' => true,
178
- 'condition' => [
179
- 'transparent!' => '',
180
- ],
181
- 'description' => __( 'Choose bottom border size and color', 'she-header' ),
182
- ]
183
- );
184
-
185
-
186
- $element->add_control(
187
- 'custom_bottom_border_color',
188
- [
189
- 'label' => __( 'Color', 'she-header' ),
190
- 'type' => Controls_Manager::COLOR,
191
- 'condition' => [
192
- 'bottom_border' => 'yes',
193
- 'transparent!' => '',
194
- ],
195
- 'render_type' => 'none',
196
- 'frontend_available' => true,
197
- ]
198
- );
199
-
200
- $element->add_responsive_control(
201
- 'custom_bottom_border_width',
202
- [
203
- 'label' => __( 'Width (px)', 'she-header' ),
204
- 'type' => Controls_Manager::SLIDER,
205
- 'default' => [
206
- 'size' => 0,
207
- ],
208
- 'range' => [
209
- 'px' => [
210
- 'min' => 0,
211
- 'max' => 100,
212
- ],
213
- ],
214
- 'size_units' => [ 'px'],
215
- 'condition' => [
216
- 'bottom_border' => 'yes',
217
- 'transparent!' => '',
218
- ],
219
- 'frontend_available' => true,
220
- ]
221
- );
222
-
223
- $element->add_control(
224
- 'shrink_header',
225
- [
226
- 'label' => __( 'Shrink', 'she-header' ),
227
- 'type' => Controls_Manager::SWITCHER,
228
- 'separator' => 'before',
229
- 'label_on' => __( 'On', 'she-header' ),
230
- 'label_off' => __( 'Off', 'she-header' ),
231
- 'return_value' => 'yes',
232
- 'default' => '',
233
- 'frontend_available' => true,
234
- 'description' => __( 'Choose header height after scrolling', 'she-header' ),
235
- 'condition' => [
236
- 'transparent!' => '',
237
- ],
238
- ]
239
- );
240
-
241
- $element->add_responsive_control(
242
- 'custom_height_header',
243
- [
244
- 'label' => __( 'Height (px)', 'she-header' ),
245
- 'type' => Controls_Manager::SLIDER,
246
- 'default' => [
247
- 'size' => 70,
248
- ],
249
- 'range' => [
250
- 'px' => [
251
- 'min' => 0,
252
- 'max' => 500,
253
- ],
254
- ],
255
- 'size_units' => [ 'px'],
256
- 'condition' => [
257
- 'shrink_header' => 'yes',
258
- 'transparent!' => '',
259
- ],
260
- 'frontend_available' => true,
261
- ]
262
- );
263
-
264
- $element->add_control(
265
- 'shrink_header_logo',
266
- [
267
- 'label' => __( 'Logo', 'she-header' ),
268
- 'type' => Controls_Manager::SWITCHER,
269
- 'label_on' => __( 'On', 'she-header' ),
270
- 'label_off' => __( 'Off', 'she-header' ),
271
- 'return_value' => 'yes',
272
- 'default' => '',
273
- 'frontend_available' => true,
274
- 'description' => __( 'Choose logo height after scrolling', 'she-header' ),
275
- 'condition' => [
276
- 'shrink_header' => 'yes',
277
- 'transparent!' => '',
278
- ],
279
- ]
280
- );
281
-
282
- $element->add_responsive_control(
283
- 'custom_height_header_logo',
284
- [
285
- 'label' => __( 'Height (px)', 'she-header' ),
286
- 'type' => Controls_Manager::SLIDER,
287
- 'default' => [
288
- 'size' => '',
289
- ],
290
- 'range' => [
291
- 'px' => [
292
- 'min' => 0,
293
- 'max' => 500,
294
- ],
295
- ],
296
- 'size_units' => [ 'px'],
297
- 'condition' => [
298
- 'shrink_header_logo' => 'yes',
299
- 'transparent!' => '',
300
- ],
301
- 'frontend_available' => true,
302
- ]
303
- );
304
-
305
-
306
- $element->end_controls_section();
307
- }
308
-
309
- private function add_actions() {
310
- if( !function_exists('is_plugin_active') ) {
311
-
312
- include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
313
-
314
- }
315
-
316
- if( is_plugin_active( 'elementor-pro/elementor-pro.php' ) ) {
317
- add_action( 'elementor/element/section/section_effects/after_section_end', [ $this, 'register_controls' ] );
318
- } else {
319
- add_action( 'elementor/element/section/section_advanced/after_section_end', [ $this, 'register_controls' ] );
320
- }
321
-
322
- add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] );
323
- if (Elementor\Plugin::instance()->editor->is_edit_mode()) {
324
- }else{
325
- add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
326
- }
327
- }
328
-
329
- public function enqueue_styles() {
330
- $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
331
-
332
- wp_enqueue_style(
333
- 'she-header-style',
334
- SHE_HEADER_ASSETS_URL . 'css/she-header-style' . '.css',
335
- [],
336
- SHE_HEADER_VERSION
337
- );
338
-
339
- }
340
-
341
- public function enqueue_scripts() {
342
- $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
343
-
344
- wp_enqueue_script(
345
- 'she-header',
346
- SHE_HEADER_URL . 'assets/js/she-header.js',
347
- [
348
- 'jquery',
349
- ],
350
- SHE_HEADER_VERSION,
351
- false
352
- );
353
- }
354
-
355
-
356
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ namespace SheHeader\Modules\Transparent;
3
+
4
+ use Elementor;
5
+ use Elementor\Plugin;
6
+ use Elementor\Controls_Manager;
7
+ use Elementor\Controls_Stack;
8
+ use SheHeader\Base\Module_Base;
9
+
10
+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
11
+
12
+ class Module extends Module_Base {
13
+
14
+ public function __construct() {
15
+ parent::__construct();
16
+
17
+ $this->add_actions();
18
+ }
19
+
20
+ public function get_name() {
21
+ return 'transparent';
22
+ }
23
+
24
+ public function register_controls( Controls_Stack $element ) {
25
+ $element->start_controls_section(
26
+ 'section_sticky_header_effect',
27
+ [
28
+ 'label' => __( 'Sticky Header Effects', 'she-header' ),
29
+ 'tab' => Controls_Manager::TAB_ADVANCED,
30
+ ]
31
+ );
32
+
33
+ $element->add_control(
34
+ 'transparent',
35
+ [
36
+ 'label' => __( 'Enable', 'she-header' ),
37
+ 'type' => Controls_Manager::SWITCHER,
38
+ 'label_on' => __( 'On', 'she-header' ),
39
+ 'label_off' => __( 'Off', 'bew-header' ),
40
+ 'return_value' => 'yes',
41
+ 'default' => '',
42
+ 'frontend_available' => true,
43
+ 'prefix_class' => 'she-header-'
44
+ ]
45
+ );
46
+
47
+ $element->add_control(
48
+ 'sticky_header_notice',
49
+ [
50
+ 'raw' => __( 'IMPORTANT: This plugin does NOT control the sticky position of the header. Please use the above Motion Effects tab sticky options to make the header sticky', 'she-header' ),
51
+ 'type' => Controls_Manager::RAW_HTML,
52
+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
53
+ 'condition' => [
54
+
55
+ 'transparent!' => '',
56
+ ],
57
+ ]
58
+ );
59
+
60
+ $element->add_control(
61
+ 'transparent_on',
62
+ [
63
+ 'label' => __( 'Enable On', 'she-header' ),
64
+ 'type' => Controls_Manager::SELECT2,
65
+ 'multiple' => true,
66
+ 'label_block' => 'true',
67
+ 'default' => [ 'desktop', 'tablet', 'mobile' ],
68
+ 'options' => [
69
+ 'desktop' => __( 'Desktop', 'she-header' ),
70
+ 'tablet' => __( 'Tablet', 'she-header' ),
71
+ 'mobile' => __( 'Mobile', 'she-header' ),
72
+ ],
73
+ 'condition' => [
74
+ 'transparent!' => ''
75
+ ],
76
+ 'render_type' => 'none',
77
+ 'description' => __( 'This will completely enable/disable ALL settings for each option except for sticky settings. Sticky settings can be found under the motion effects tab above', 'she-header' ),
78
+ 'frontend_available' => true,
79
+ ]
80
+ );
81
+
82
+
83
+ $element->add_responsive_control(
84
+ 'scroll_distance',
85
+ [
86
+ 'label' => __( 'Scroll Distance (px)', 'she-header' ),
87
+ 'type' => Controls_Manager::SLIDER,
88
+ 'default' => [
89
+ 'size' => 60,
90
+ ],
91
+ 'range' => [
92
+ 'px' => [
93
+ 'min' => 0,
94
+ 'max' => 500,
95
+ ],
96
+ ],
97
+ 'size_units' => [ 'px'],
98
+ 'description' => __( 'Choose the scroll distance to enable Sticky Header Effects', 'she-header' ),
99
+ 'frontend_available' => true,
100
+ 'condition' => [
101
+ 'transparent!' => '',
102
+ ],
103
+ ]
104
+ );
105
+
106
+ $element->add_control(
107
+ 'settings_notice',
108
+ [
109
+ 'raw' => __( 'Remember: The settings below will not be applied until the page is scrolled the distance set above', 'she-header' ),
110
+ 'type' => Controls_Manager::RAW_HTML,
111
+ 'content_classes' => 'elementor-descriptor',
112
+ 'condition' => [
113
+ 'transparent!' => '',
114
+ ],
115
+ ]
116
+ );
117
+
118
+ $element->add_control(
119
+ 'transparent_header_show',
120
+ [
121
+ 'label' => __( 'Transparent Header', 'she-header' ),
122
+ 'type' => Controls_Manager::SWITCHER,
123
+ 'separator' => 'before',
124
+ 'label_on' => __( 'On', 'she-header' ),
125
+ 'label_off' => __( 'Off', 'bew-header' ),
126
+ 'return_value' => 'yes',
127
+ 'default' => '',
128
+ 'frontend_available' => true,
129
+ 'condition' => [
130
+ 'transparent!' => '',
131
+ ],
132
+ 'description' => __( 'Sets the header position to "absolute" so negative margins are not needed', 'she-header' ),
133
+ ]
134
+ );
135
+
136
+ $element->add_control(
137
+ 'transparent_note',
138
+ [
139
+ 'raw' => __( 'IMPORTANT: This will make the header overlap the main page so extra spacing at the top of sections may be necesary. **May only work on frontend', 'she-header' ),
140
+ 'type' => Controls_Manager::RAW_HTML,
141
+ 'content_classes' => 'elementor-descriptor',
142
+ 'condition' => [
143
+ 'transparent_header_show' => 'yes',
144
+ 'transparent!' => '',
145
+ ],
146
+ ]
147
+ );
148
+
149
+ $element->add_control(
150
+ 'transparent_important',
151
+ [
152
+ 'label' => __( 'Above Header Sections', 'she-header' ),
153
+ 'raw' => __( '<br>"Scroll Distance" settings and Elementor "Motion Effects > Offset" settings should be set to the height of any section above the header.<br>Example: Above header section min-height = 60px. Set both scroll distance and motion effects offset to 60px', 'she-header' ),
154
+ 'type' => Controls_Manager::RAW_HTML,
155
+ 'content_classes' => 'elementor-descriptor',
156
+ 'condition' => [
157
+ 'transparent_header_show' => 'yes',
158
+ 'transparent!' => '',
159
+ ],
160
+ ]
161
+ );
162
+
163
+ $element->add_control(
164
+ 'background_show',
165
+ [
166
+ 'label' => __( 'Background Color', 'she-header' ),
167
+ 'type' => Controls_Manager::SWITCHER,
168
+ 'separator' => 'before',
169
+ 'label_on' => __( 'On', 'she-header' ),
170
+ 'label_off' => __( 'Off', 'bew-header' ),
171
+ 'return_value' => 'yes',
172
+ 'default' => '',
173
+ 'frontend_available' => true,
174
+ 'condition' => [
175
+ 'transparent!' => '',
176
+ ],
177
+ 'description' => __( 'Choose what color to change the background to after scrolling', 'she-header' ),
178
+ ]
179
+ );
180
+
181
+ $element->add_control(
182
+ 'background',
183
+ [
184
+ 'label' => __( 'Color', 'she-header' ),
185
+ 'type' => Controls_Manager::COLOR,
186
+ 'condition' => [
187
+ 'background_show' => 'yes',
188
+ 'transparent!' => '',
189
+ ],
190
+ 'render_type' => 'none',
191
+ 'frontend_available' => true,
192
+ ]
193
+ );
194
+
195
+ $element->add_control(
196
+ 'bottom_border',
197
+ [
198
+ 'label' => __( 'Bottom Border', 'she-header' ),
199
+ 'type' => Controls_Manager::SWITCHER,
200
+ 'separator' => 'before',
201
+ 'label_on' => __( 'On', 'she-header' ),
202
+ 'label_off' => __( 'Off', 'she-header' ),
203
+ 'return_value' => 'yes',
204
+ 'default' => '',
205
+ 'frontend_available' => true,
206
+ 'condition' => [
207
+ 'transparent!' => '',
208
+ ],
209
+ 'description' => __( 'Choose bottom border size and color', 'she-header' ),
210
+ ]
211
+ );
212
+
213
+
214
+ $element->add_control(
215
+ 'custom_bottom_border_color',
216
+ [
217
+ 'label' => __( 'Color', 'she-header' ),
218
+ 'type' => Controls_Manager::COLOR,
219
+ 'condition' => [
220
+ 'bottom_border' => 'yes',
221
+ 'transparent!' => '',
222
+ ],
223
+ 'render_type' => 'none',
224
+ 'frontend_available' => true,
225
+ ]
226
+ );
227
+
228
+ $element->add_responsive_control(
229
+ 'custom_bottom_border_width',
230
+ [
231
+ 'label' => __( 'Bottom Border Thickness (px)', 'she-header' ),
232
+ 'type' => Controls_Manager::SLIDER,
233
+ 'default' => [
234
+ 'size' => 0,
235
+ ],
236
+ 'range' => [
237
+ 'px' => [
238
+ 'min' => 0,
239
+ 'max' => 100,
240
+ ],
241
+ ],
242
+ 'size_units' => [ 'px'],
243
+ 'condition' => [
244
+ 'bottom_border' => 'yes',
245
+ 'transparent!' => '',
246
+ ],
247
+ 'frontend_available' => true,
248
+ ]
249
+ );
250
+
251
+ $element->add_control(
252
+ 'shrink_header',
253
+ [
254
+ 'label' => __( 'Shrink Header', 'she-header' ),
255
+ 'type' => Controls_Manager::SWITCHER,
256
+ 'separator' => 'before',
257
+ 'label_on' => __( 'On', 'she-header' ),
258
+ 'label_off' => __( 'Off', 'she-header' ),
259
+ 'return_value' => 'yes',
260
+ 'default' => '',
261
+ 'frontend_available' => true,
262
+ 'description' => __( 'Choose header height after scrolling', 'she-header' ),
263
+ 'condition' => [
264
+ 'transparent!' => '',
265
+ ],
266
+ ]
267
+ );
268
+
269
+ $element->add_responsive_control(
270
+ 'custom_height_header',
271
+ [
272
+ 'label' => __( 'Header Height (px)', 'she-header' ),
273
+ 'type' => Controls_Manager::SLIDER,
274
+ 'default' => [
275
+ 'size' => 70,
276
+ ],
277
+ 'range' => [
278
+ 'px' => [
279
+ 'min' => 0,
280
+ 'max' => 500,
281
+ ],
282
+ ],
283
+ 'size_units' => [ 'px'],
284
+ 'description' => __( 'Remember: The header cannot shrink smaller than the elements inside of it', 'she-header' ),
285
+ 'condition' => [
286
+ 'shrink_header' => 'yes',
287
+ 'transparent!' => '',
288
+ ],
289
+ 'frontend_available' => true,
290
+ ]
291
+ );
292
+
293
+ $element->add_control(
294
+ 'shrink_header_logo',
295
+ [
296
+ 'label' => __( 'Shrink Logo', 'she-header' ),
297
+ 'type' => Controls_Manager::SWITCHER,
298
+ 'separator' => 'before',
299
+ 'label_on' => __( 'On', 'she-header' ),
300
+ 'label_off' => __( 'Off', 'she-header' ),
301
+ 'return_value' => 'yes',
302
+ 'default' => '',
303
+ 'frontend_available' => true,
304
+ 'description' => __( 'Choose logo height after scrolling', 'she-header' ),
305
+ 'condition' => [
306
+ 'transparent!' => '',
307
+ ],
308
+ ]
309
+ );
310
+
311
+ $element->add_responsive_control(
312
+ 'custom_height_header_logo',
313
+ [
314
+ 'label' => __( 'Logo Height(%)', 'she-header' ),
315
+ 'type' => Controls_Manager::SLIDER,
316
+ 'default' => [
317
+ 'size' => 70,
318
+ ],
319
+ 'range' => [
320
+ '%' => [
321
+ 'min' => 0,
322
+ 'max' => 100,
323
+ ],
324
+ ],
325
+ 'size_units' => [ '%'],
326
+ 'condition' => [
327
+ 'shrink_header_logo' => 'yes',
328
+ 'transparent!' => '',
329
+ ],
330
+ 'frontend_available' => true,
331
+ ]
332
+ );
333
+
334
+ // ---------------------------------- LOGO COLOR TOGGLE
335
+
336
+ $element->add_control(
337
+ 'change_logo_color',
338
+ [
339
+ 'label' => __( 'Change Logo Color', 'she-header' ),
340
+ 'type' => Controls_Manager::SWITCHER,
341
+ 'separator' => 'before',
342
+ 'label_on' => __( 'On', 'she-header' ),
343
+ 'label_off' => __( 'Off', 'she-header' ),
344
+ 'return_value' => 'yes',
345
+ 'default' => '',
346
+ 'frontend_available' => true,
347
+ 'description' => __( 'Change the logo image color before or after the user reaches the scroll distance set above', 'she-header' ),
348
+ 'condition' => [
349
+ 'transparent!' => '',
350
+ ],
351
+ ]
352
+ );
353
+
354
+ // ---------------------------------- LOGO COLOR NOTICE
355
+
356
+ $element->add_control(
357
+ 'logo_color_notice',
358
+ [
359
+ 'raw' => __( 'Note: These settings will override the CSS filters set under the logo style tab and might only work on the frontend', 'she-header' ),
360
+ 'type' => Controls_Manager::RAW_HTML,
361
+ 'content_classes' => 'elementor-descriptor',
362
+ 'condition' => [
363
+ 'change_logo_color' => 'yes',
364
+ 'transparent!' => '',
365
+ ],
366
+ ]
367
+ );
368
+
369
+ // ---------------------------------- LOGO COLOR TABS
370
+
371
+ $element->start_controls_tabs(
372
+ 'logo_color_tabs'
373
+ );
374
+
375
+ // ---------------------------------- LOGO BEFORE TAB
376
+
377
+ $element->start_controls_tab(
378
+ 'before_tab',
379
+ [
380
+ 'label' => __( 'Before scrolling', 'she-header' ),
381
+ 'condition' => [
382
+ 'change_logo_color' => 'yes',
383
+ 'transparent!' => '',
384
+ ],
385
+ ]
386
+ );
387
+
388
+ // ---------------------------------- LOGO WHITE BEFORE
389
+
390
+ $element->add_control(
391
+ 'logo_color_white_before',
392
+ [
393
+ 'label' => __( 'White Logo', 'she-header' ),
394
+ 'type' => Controls_Manager::SWITCHER,
395
+ 'label_on' => __( 'On', 'she-header' ),
396
+ 'label_off' => __( 'Off', 'she-header' ),
397
+ 'return_value' => 'yes',
398
+ 'default' => '',
399
+ 'frontend_available' => true,
400
+ 'description' => __( 'Change the logo to white', 'she-header' ),
401
+ 'prefix_class' => 'she-header-change-logo-color-',
402
+ 'condition' => [
403
+ 'change_logo_color' => 'yes',
404
+ 'transparent!' => '',
405
+ ],
406
+ 'selectors' => [
407
+ '{{WRAPPER}} .elementor-widget-theme-site-logo img' => '-webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; transition: all .4s ease-in-out 0s;',
408
+ '{{WRAPPER}} .logo img' => '-webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; transition: all .4s ease-in-out 0s;',
409
+ ],
410
+ ]
411
+ );
412
+
413
+ // ---------------------------------- LOGO BLACK BEFORE
414
+
415
+ $element->add_control(
416
+ 'logo_color_black_before',
417
+ [
418
+ 'label' => __( 'Black Logo', 'she-header' ),
419
+ 'type' => Controls_Manager::SWITCHER,
420
+ 'label_on' => __( 'On', 'she-header' ),
421
+ 'label_off' => __( 'Off', 'she-header' ),
422
+ 'return_value' => 'yes',
423
+ 'default' => '',
424
+ 'frontend_available' => true,
425
+ 'description' => __( 'Change the logo to black', 'she-header' ),
426
+ 'prefix_class' => 'she-header-change-logo-color-',
427
+ 'condition' => [
428
+ 'change_logo_color' => 'yes',
429
+ 'transparent!' => '',
430
+ ],
431
+ 'selectors' => [
432
+ '{{WRAPPER}} .elementor-widget-theme-site-logo img' => '-webkit-filter: brightness(0) invert(0) !important; filter: brightness(0) invert(0) !important; transition: all .4s ease-in-out 0s;',
433
+ '{{WRAPPER}} .logo img' => '-webkit-filter: brightness(0) invert(0) !important; filter: brightness(0) invert(0) !important; transition: all .4s ease-in-out 0s;',
434
+ ],
435
+ ]
436
+ );
437
+
438
+ $element->end_controls_tab();
439
+
440
+ // ---------------------------------- LOGO AFTER TAB
441
+
442
+ $element->start_controls_tab(
443
+ 'after_tab',
444
+ [
445
+ 'label' => __( 'After Scrolling', 'she-header' ),
446
+ 'condition' => [
447
+ 'change_logo_color' => 'yes',
448
+ 'transparent!' => '',
449
+ ],
450
+ ]
451
+ );
452
+
453
+ // ---------------------------------- LOGO WHITE AFTER
454
+
455
+ $element->add_control(
456
+ 'logo_color_white_after',
457
+ [
458
+ 'label' => __( 'White Logo', 'she-header' ),
459
+ 'type' => Controls_Manager::SWITCHER,
460
+ 'label_on' => __( 'On', 'she-header' ),
461
+ 'label_off' => __( 'Off', 'she-header' ),
462
+ 'return_value' => 'yes',
463
+ 'default' => '',
464
+ 'frontend_available' => true,
465
+ 'description' => __( 'Change the logo to white', 'she-header' ),
466
+ 'prefix_class' => 'she-header-change-logo-color-',
467
+ 'condition' => [
468
+ 'change_logo_color' => 'yes',
469
+ 'transparent!' => '',
470
+ ],
471
+ 'selectors' => [
472
+ '{{WRAPPER}} .elementor-widget-theme-site-logo img.change-logo-color' => '-webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; transition: all .4s ease-in-out 0s;',
473
+ '{{WRAPPER}} .logo img.change-logo-color' => '-webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; transition: all .4s ease-in-out 0s;',
474
+ ],
475
+ ]
476
+ );
477
+
478
+ // ---------------------------------- LOGO BLACK AFTER
479
+
480
+ $element->add_control(
481
+ 'logo_color_black_after',
482
+ [
483
+ 'label' => __( 'Black Logo', 'she-header' ),
484
+ 'type' => Controls_Manager::SWITCHER,
485
+ 'label_on' => __( 'On', 'she-header' ),
486
+ 'label_off' => __( 'Off', 'she-header' ),
487
+ 'return_value' => 'yes',
488
+ 'default' => '',
489
+ 'frontend_available' => true,
490
+ 'description' => __( 'Change the logo to black', 'she-header' ),
491
+ 'prefix_class' => 'she-header-change-logo-color-',
492
+ 'condition' => [
493
+ 'change_logo_color' => 'yes',
494
+ 'transparent!' => '',
495
+ ],
496
+ 'selectors' => [
497
+ '{{WRAPPER}} .elementor-widget-theme-site-logo img.change-logo-color' => '-webkit-filter: brightness(0) invert(0) !important; filter: brightness(0) invert(0) !important; transition: all .4s ease-in-out 0s;',
498
+ '{{WRAPPER}} .logo img.change-logo-color' => '-webkit-filter: brightness(0) invert(0) !important; filter: brightness(0) invert(0) !important; transition: all .4s ease-in-out 0s;',
499
+ ],
500
+ ]
501
+ );
502
+
503
+ // ---------------------------------- LOGO FULL COLOR AFTER
504
+
505
+ $element->add_control(
506
+ 'logo_color_full_after',
507
+ [
508
+ 'label' => __( 'Full Color Logo', 'she-header' ),
509
+ 'type' => Controls_Manager::SWITCHER,
510
+ 'label_on' => __( 'On', 'she-header' ),
511
+ 'label_off' => __( 'Off', 'she-header' ),
512
+ 'return_value' => 'yes',
513
+ 'default' => '',
514
+ 'frontend_available' => true,
515
+ 'description' => __( 'Removes all filters to allow a full color logo image', 'she-header' ),
516
+ 'prefix_class' => 'she-header-change-logo-color-',
517
+ 'condition' => [
518
+ 'change_logo_color' => 'yes',
519
+ 'transparent!' => '',
520
+ ],
521
+ 'selectors' => [
522
+ '{{WRAPPER}} .elementor-widget-theme-site-logo img.change-logo-color' => '-webkit-filter: ""; filter: ""; transition: all .4s ease-in-out 0s;',
523
+ '{{WRAPPER}} .logo img.change-logo-color' => '-webkit-filter: "none"; filter: "none"; transition: all .4s ease-in-out 0s;',
524
+ ],
525
+ ]
526
+ );
527
+
528
+ $element->end_controls_tab();
529
+ $element->end_controls_tabs();
530
+
531
+ $element->add_control(
532
+ 'blur_bg',
533
+ [
534
+ 'label' => __( 'Blur Background', 'she-header' ),
535
+ 'type' => Controls_Manager::SWITCHER,
536
+ 'separator' => 'before',
537
+ 'label_on' => __( 'On', 'she-header' ),
538
+ 'label_off' => __( 'Off', 'she-header' ),
539
+ 'return_value' => 'yes',
540
+ 'default' => '',
541
+ 'frontend_available' => true,
542
+ 'condition' => [
543
+ 'transparent!' => '',
544
+ ],
545
+ 'description' => __( 'Add a modern blur effect to a semi-transparent header background color after scrolling', 'she-header' ),
546
+ ]
547
+ );
548
+
549
+ $element->add_control(
550
+ 'hide_header',
551
+ [
552
+ 'label' => __( 'Hide header on scroll down', 'she-header' ),
553
+ 'type' => Controls_Manager::SWITCHER,
554
+ 'separator' => 'before',
555
+ 'label_on' => __( 'On', 'she-header' ),
556
+ 'label_off' => __( 'Off', 'she-header' ),
557
+ 'return_value' => 'yes',
558
+ 'default' => '',
559
+ 'frontend_available' => true,
560
+ 'description' => __( 'Hides the header if scrolling down, and shows header if scrolling up', 'she-header' ),
561
+ 'prefix_class' => 'she-header-hide-on-scroll-',
562
+ 'condition' => [
563
+ 'transparent!' => '',
564
+ ],
565
+ ]
566
+ );
567
+
568
+ $element->add_responsive_control(
569
+ 'scroll_distance_hide_header',
570
+ [
571
+ 'label' => __( 'Scroll Distance (px)', 'she-header' ),
572
+ 'type' => Controls_Manager::SLIDER,
573
+ 'default' => [
574
+ 'size' => 500,
575
+ ],
576
+ 'range' => [
577
+ 'px' => [
578
+ 'min' => 0,
579
+ 'max' => 1000,
580
+ ],
581
+ ],
582
+ 'size_units' => [ 'px'],
583
+ 'description' => __( 'Choose the scroll distance to start hiding the header', 'she-header' ),
584
+ 'frontend_available' => true,
585
+ 'condition' => [
586
+ 'hide_header' => 'yes',
587
+ 'transparent!' => '',
588
+ ],
589
+ ]
590
+ );
591
+
592
+ $element->end_controls_section();
593
+ }
594
+
595
+ private function add_actions() {
596
+ if( !function_exists('is_plugin_active') ) {
597
+
598
+ include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
599
+
600
+ }
601
+
602
+ if( is_plugin_active( 'elementor-pro/elementor-pro.php' ) ) {
603
+ add_action( 'elementor/element/section/section_effects/after_section_end', [ $this, 'register_controls' ] );
604
+ } else {
605
+ add_action( 'elementor/element/section/section_advanced/after_section_end', [ $this, 'register_controls' ] );
606
+ }
607
+
608
+ add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] );
609
+ if (Elementor\Plugin::instance()->editor->is_edit_mode()) {
610
+ }else{
611
+ add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
612
+ }
613
+ }
614
+
615
+ public function enqueue_styles() {
616
+ $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
617
+
618
+ wp_enqueue_style(
619
+ 'she-header-style',
620
+ SHE_HEADER_ASSETS_URL . 'css/she-header-style' . '.css',
621
+ [],
622
+ SHE_HEADER_VERSION
623
+ );
624
+
625
+ }
626
+
627
+ public function enqueue_scripts() {
628
+ $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
629
+
630
+ wp_enqueue_script(
631
+ 'she-header',
632
+ SHE_HEADER_URL . 'assets/js/she-header.js',
633
+ [
634
+ 'jquery',
635
+ ],
636
+ SHE_HEADER_VERSION,
637
+ false
638
+ );
639
+ }
640
+
641
+
642
+ }
readme.txt CHANGED
@@ -1,12 +1,12 @@
1
  === Sticky Header Effects for Elementor ===
2
 
3
- Contributors: rwattner, dgovea
4
  Donate Link: https://www.paypal.me/StickyHeaderEffects
5
  Tags: Elementor, Elementor Page Builder, Elements, Elementor Add-ons, Add-ons, Page Builder, Widgets, Briefcasewp
6
  Requires at least: 4.9.0
7
- Tested up to: 5.2.2
8
  Requires PHP: 5.4
9
- Stable tag: 1.3.2
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
 
@@ -14,9 +14,9 @@ Options and features that extend Elementor Pro's sticky header capabilities.
14
 
15
  == Description ==
16
 
17
- Sticky Header Effects for Elementor adds useful options that are missing from the "sticky" header feature introduced in Elementor Pro 2.0. Giving users the option to change the background color and height when the visitor starts scrolling down the page. This allows for a "transparent" menu effect that can become any color, semi-transparent or solid, once the visitor begins to scroll.
18
 
19
- This plugin is cross-browser compatible and fully responsive. Meaning it will work on all browsers as well as tablets and mobile devices.
20
 
21
  This plugin is meant to be an add-on to Elementor Pro page builder as it's not a standalone plugin.
22
 
@@ -25,11 +25,14 @@ This plugin is meant to be an add-on to Elementor Pro page builder as it's not a
25
  * Options panel built-in to Elementor Pro's advanced section options. - Settings are right where they should be without cluttering up your workspace.
26
  * Apply options on scrolling - The scrolling distance for the Sticky Header Effects to be applied is responsively adjustable for the best results in any situation.
27
  * Transparent Header - Uses position to move header section down on top of the page. No need for problem causing negative margins.
28
- * Header Background - Color options for header after scrolling with full HEX, RGBA, and Color Name support.
29
  * Bottom Border - Allows user to change the color and thickness of the bottom border upon scrolling.
30
- * Shrink - An effect which changes section min-height to maximize space and achieve a slim style without losing functionality.
31
  (Remember that the "shrink" effect is limited by the height and padding of the header content. See the F.A.Q.)
32
  * Shrink Logo - Ability to adjust the logo height after scrolling
 
 
 
33
 
34
  ### Pro Features Coming Soon
35
 
@@ -87,6 +90,24 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
87
  3. Current effects settings.
88
 
89
  == Changelog ==
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
 
91
  = 1.3.2 =
92
  - Fixed: Transition CSS
@@ -95,7 +116,7 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
95
  - Fixed: Bugs
96
 
97
  = 1.3.0 =
98
- - Added: Shrink Logo featured
99
 
100
  = 1.2.3 =
101
  - Fixed: Hook on the new Elementor Pro 2.4.7 version
@@ -131,6 +152,24 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
131
  - Initial stable release
132
 
133
  == Upgrade Notice ==
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
 
135
  = 1.3.2 =
136
  - Fixed: Transition CSS
1
  === Sticky Header Effects for Elementor ===
2
 
3
+ Contributors: rwattner, dgovea
4
  Donate Link: https://www.paypal.me/StickyHeaderEffects
5
  Tags: Elementor, Elementor Page Builder, Elements, Elementor Add-ons, Add-ons, Page Builder, Widgets, Briefcasewp
6
  Requires at least: 4.9.0
7
+ Tested up to: 5.5
8
  Requires PHP: 5.4
9
+ Stable tag: 1.4.2
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
 
14
 
15
  == Description ==
16
 
17
+ Sticky Header Effects for Elementor adds useful options that are missing from the "sticky" header feature introduced in Elementor Pro 2.0. Giving users the option to change the background color and height when the visitor starts scrolling down the page. This allows for a "transparent" menu effect that can become any color, semi-transparent or solid, once the visitor begins to scroll.
18
 
19
+ This plugin is cross-browser compatible and fully responsive. Meaning it will work on all browsers as well as tablets and mobile devices.
20
 
21
  This plugin is meant to be an add-on to Elementor Pro page builder as it's not a standalone plugin.
22
 
25
  * Options panel built-in to Elementor Pro's advanced section options. - Settings are right where they should be without cluttering up your workspace.
26
  * Apply options on scrolling - The scrolling distance for the Sticky Header Effects to be applied is responsively adjustable for the best results in any situation.
27
  * Transparent Header - Uses position to move header section down on top of the page. No need for problem causing negative margins.
28
+ * Header Background Color - Options for header after scrolling with full HEX, RGBA, and Color Name support.
29
  * Bottom Border - Allows user to change the color and thickness of the bottom border upon scrolling.
30
+ * Shrink Header - An effect which changes section min-height to maximize space and achieve a slim style without losing functionality.
31
  (Remember that the "shrink" effect is limited by the height and padding of the header content. See the F.A.Q.)
32
  * Shrink Logo - Ability to adjust the logo height after scrolling
33
+ *Change Logo Color - Change the logo image color before or after the user scrolls. Useful for switching header design from monocromatic to full color
34
+ *Blur Background - Add a modern blur effect to a semi-transparent header background color after scrolling
35
+ *Hide Header on Scroll Down - Hides the header if scrolling down, and shows header if scrolling up. Has selectable distance to start the effect
36
 
37
  ### Pro Features Coming Soon
38
 
90
  3. Current effects settings.
91
 
92
  == Changelog ==
93
+ = 1.4.1 =
94
+ Fixed: Bugs
95
+
96
+ = 1.4.1 =
97
+ Fixed: Gap above header bug
98
+
99
+ = 1.4.0 =
100
+ - Added: Wordpress 5.5 compatibility
101
+ - Added: Elementor 3 compatibility
102
+ - Added: Hide on scroll down feature
103
+ - Added: Blur background feature
104
+ - Added: Before and after scrolling logo color options
105
+ - Fixed: Opera browser hash links not activating scrolling effects
106
+ - Fixed: Editor handle bug
107
+ - Fixed: All labels and descriptions to help with user operation
108
+ - Fixed: Various code optimizations
109
+ - Fixed: Transparent on mobile bug
110
+ - Fixed: Stretched section broke transparent header
111
 
112
  = 1.3.2 =
113
  - Fixed: Transition CSS
116
  - Fixed: Bugs
117
 
118
  = 1.3.0 =
119
+ - Added: Shrink Logo feature
120
 
121
  = 1.2.3 =
122
  - Fixed: Hook on the new Elementor Pro 2.4.7 version
152
  - Initial stable release
153
 
154
  == Upgrade Notice ==
155
+ = 1.4.1 =
156
+ Fixed: Bugs
157
+
158
+ = 1.4.1 =
159
+ Fixed: Gap above header bug
160
+
161
+ = 1.4.0 =
162
+ - Added: Wordpress 5.5 compatibility
163
+ - Added: Elementor 3 compatibility
164
+ - Added: Hide on scroll down feature
165
+ - Added: Blur background feature
166
+ - Added: Before and after scrolling logo color options
167
+ - Fixed: Opera browser hash links not activating scrolling effects
168
+ - Fixed: Editor handle bug
169
+ - Fixed: All labels and descriptions to help with user operation
170
+ - Fixed: Various code optimizations
171
+ - Fixed: Transparent on mobile bug
172
+ - Fixed: Stretched section broke transparent header
173
 
174
  = 1.3.2 =
175
  - Fixed: Transition CSS
sticky-header-effects-for-elementor.php CHANGED
@@ -3,11 +3,11 @@
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.3.2
7
  * Author: Rwattner
8
  * Author URI: https://stickyheadereffects.com
9
  * Requires at least: 4.9.0
10
- * Tested up to: 5.2.2
11
  *
12
  * Text Domain: she-header
13
  * Domain Path: /languages/
@@ -19,8 +19,8 @@
19
 
20
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
 
22
- define( 'SHE_HEADER_VERSION', '1.3.2' );
23
- define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.3.1' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );
26
  define( 'SHE_HEADER_PLUGIN_BASE', plugin_basename( SHE_HEADER__FILE__ ) );
@@ -51,7 +51,7 @@ function she_header_load_plugin() {
51
  return;
52
  }
53
 
54
- $elementor_version_recommendation = '2.5';
55
  if ( ! version_compare( ELEMENTOR_VERSION, $elementor_version_recommendation, '>=' ) ) {
56
  add_action( 'admin_notices', 'she_header_admin_notice_upgrade_recommendation' );
57
  }
@@ -135,5 +135,3 @@ if ( ! function_exists( '_is_elementor_installed' ) ) {
135
  return isset( $installed_plugins[ $file_path ] );
136
  }
137
  }
138
-
139
-
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.4.1
7
  * Author: Rwattner
8
  * Author URI: https://stickyheadereffects.com
9
  * Requires at least: 4.9.0
10
+ * Tested up to: 5.5
11
  *
12
  * Text Domain: she-header
13
  * Domain Path: /languages/
19
 
20
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
21
 
22
+ define( 'SHE_HEADER_VERSION', '1.4.1' );
23
+ define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.4.0' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );
26
  define( 'SHE_HEADER_PLUGIN_BASE', plugin_basename( SHE_HEADER__FILE__ ) );
51
  return;
52
  }
53
 
54
+ $elementor_version_recommendation = '3.0';
55
  if ( ! version_compare( ELEMENTOR_VERSION, $elementor_version_recommendation, '>=' ) ) {
56
  add_action( 'admin_notices', 'she_header_admin_notice_upgrade_recommendation' );
57
  }
135
  return isset( $installed_plugins[ $file_path ] );
136
  }
137
  }