Sticky Header Effects for Elementor - Version 1.5.5

Version Description

  • Fixed: Shrinking Logo bug
  • Fixed: Header section top position
  • Maintenence: Optimized CSS code
Download this release

Release Info

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

Code changes from version 1.5.4 to 1.5.5

Files changed (5) hide show
  1. assets/css/she-header-style.css +0 -1
  2. assets/js/she-header.js +171 -237
  3. modules/transparent/module.php +667 -667
  4. readme.txt +11 -1
  5. sticky-header-effects-for-elementor.php +2 -2
assets/css/she-header-style.css CHANGED
@@ -5,7 +5,6 @@ Header Style
5
  -------------------------------------------------------------------*/
6
 
7
  .header {
8
- top: inherit !important;
9
  z-index: 99;
10
  width: 100%;
11
  transition: all 0.4s ease-in-out;
5
  -------------------------------------------------------------------*/
6
 
7
  .header {
 
8
  z-index: 99;
9
  width: 100%;
10
  transition: all 0.4s ease-in-out;
assets/js/she-header.js CHANGED
@@ -1,237 +1,171 @@
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, .she-header-yes.e-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
- };
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, .she-header-yes.e-container'),
19
+ header_elementor = $j('.elementor-edit-mode .she-header-yes'),
20
+ header_logo = $j('.she-header-yes .elementor-widget-theme-site-logo .elementor-image, .she-header-yes .elementor-widget-image .elementor-image'),
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
+ // border bottom
92
+ if( typeof bottom_border_width != 'undefined' && bottom_border_width) {
93
+ var bottom_border = bottom_border_width["size"] + "px solid " + bottom_border_color;
94
+ }
95
+
96
+
97
+ // hide header on scroll
98
+ if( typeof scroll_distance_hide_header != 'undefined' && scroll_distance_hide_header) {
99
+
100
+ var mywindow = $j(window);
101
+ var mypos = mywindow.scrollTop();
102
+
103
+ mywindow.scroll(function() {
104
+ if (mypos > scroll_distance_hide_header["size"]) {
105
+ if(mywindow.scrollTop() > mypos)
106
+ {
107
+ header.addClass('headerup');
108
+ }else{
109
+ header.removeClass('headerup');
110
+ }
111
+ }
112
+ mypos = mywindow.scrollTop();
113
+ });
114
+ }
115
+
116
+ // scroll function
117
+ $j(window).on("load scroll",function(e){
118
+ var scroll = $j(window).scrollTop();
119
+
120
+ if (header_elementor) {
121
+ header_elementor.css("position", "relative");
122
+ }
123
+
124
+ if (scroll >= scroll_distance["size"]) {
125
+ header.removeClass('header').addClass("she-header");
126
+ header.css("background-color", background);
127
+ header.css("border-bottom", bottom_border);
128
+ header.removeClass('she-header-transparent-yes');
129
+
130
+ if( shrink_header == "yes" ) {
131
+ header.css({"padding-top":"0", "padding-bottom":"0", "margin-top":"0", "margin-bottom":"0"});
132
+ 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"});
133
+
134
+ }
135
+
136
+ if( change_logo_color == "yes" ) {
137
+ header_logo.addClass("change-logo-color");
138
+
139
+ }
140
+
141
+ if( blur_bg == "yes" ) {
142
+ header.css({"backdrop-filter": "saturate(180%) blur(20px)", "-webkit-backdrop-filter": "saturate(180%) blur(20px)"});
143
+
144
+ }
145
+
146
+ } else {
147
+ header.removeClass("she-header").addClass('header');
148
+ header.css("background-color", "");
149
+ header.css("border-bottom", "");
150
+
151
+ if(transparent_header == "yes" ){
152
+ header.addClass('she-header-transparent-yes');
153
+ }
154
+ if( shrink_header == "yes" ) {
155
+ header.css({"padding-top":"", "padding-bottom":"", "margin-top":"", "margin-bottom":""});
156
+ container.css("min-height", "");
157
+ }
158
+ if( change_logo_color == "yes" ) {
159
+ header_logo.removeClass("change-logo-color");
160
+
161
+ }
162
+ if( blur_bg == "yes" ) {
163
+ header.css({"backdrop-filter": "", "-webkit-backdrop-filter": ""});
164
+ }
165
+ }
166
+
167
+
168
+ });
169
+ }
170
+
171
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
modules/transparent/module.php CHANGED
@@ -1,667 +1,667 @@
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
-
327
- 'condition' => [
328
- 'shrink_header_logo' => 'yes',
329
- 'transparent!' => '',
330
- ],
331
- 'frontend_available' => true,
332
- 'selectors' => [
333
- '{{WRAPPER}}.she-header .elementor-widget-theme-site-logo img, {{WRAPPER}}.she-header .elementor-widget-image img' => '-webkit-transform: scale(calc({{VALUE}}/100)) !important;-ms-transform: scale(calc({{VALUE}}/100)) !important;transform: scale(calc({{VALUE}}/100)) !important; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;',
334
- ],
335
- ]
336
- );
337
-
338
- // ---------------------------------- LOGO COLOR TOGGLE
339
-
340
- $element->add_control(
341
- 'change_logo_color',
342
- [
343
- 'label' => __( 'Change Logo Color', 'she-header' ),
344
- 'type' => Controls_Manager::SWITCHER,
345
- 'separator' => 'before',
346
- 'label_on' => __( 'On', 'she-header' ),
347
- 'label_off' => __( 'Off', 'she-header' ),
348
- 'return_value' => 'yes',
349
- 'default' => '',
350
- 'frontend_available' => true,
351
- 'description' => __( 'Change the logo image color before or after the user reaches the scroll distance set above', 'she-header' ),
352
- 'condition' => [
353
- 'transparent!' => '',
354
- ],
355
- ]
356
- );
357
-
358
- // ---------------------------------- LOGO COLOR NOTICE
359
-
360
- $element->add_control(
361
- 'logo_color_notice',
362
- [
363
- 'raw' => __( 'Note: These settings will override the CSS filters set under the logo style tab and might only work on the frontend', 'she-header' ),
364
- 'type' => Controls_Manager::RAW_HTML,
365
- 'content_classes' => 'elementor-descriptor',
366
- 'condition' => [
367
- 'change_logo_color' => 'yes',
368
- 'transparent!' => '',
369
- ],
370
- ]
371
- );
372
-
373
- // ---------------------------------- LOGO COLOR TABS
374
-
375
- $element->start_controls_tabs(
376
- 'logo_color_tabs'
377
- );
378
-
379
- // ---------------------------------- LOGO BEFORE TAB
380
-
381
- $element->start_controls_tab(
382
- 'before_tab',
383
- [
384
- 'label' => __( 'Before scrolling', 'she-header' ),
385
- 'condition' => [
386
- 'change_logo_color' => 'yes',
387
- 'transparent!' => '',
388
- ],
389
- ]
390
- );
391
-
392
- // ---------------------------------- LOGO WHITE BEFORE
393
-
394
- $element->add_control(
395
- 'logo_color_white_before',
396
- [
397
- 'label' => __( 'White Logo', 'she-header' ),
398
- 'type' => Controls_Manager::SWITCHER,
399
- 'label_on' => __( 'On', 'she-header' ),
400
- 'label_off' => __( 'Off', 'she-header' ),
401
- 'return_value' => 'yes',
402
- 'default' => '',
403
- 'frontend_available' => true,
404
- 'description' => __( 'Change the logo to white', 'she-header' ),
405
- 'prefix_class' => 'she-header-change-logo-color-',
406
- 'condition' => [
407
- 'change_logo_color' => 'yes',
408
- 'transparent!' => '',
409
- ],
410
- 'selectors' => [
411
- '{{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;',
412
- '{{WRAPPER}} .logo img' => '-webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; transition: all .4s ease-in-out 0s;',
413
- ],
414
- ]
415
- );
416
-
417
- // ---------------------------------- LOGO BLACK BEFORE
418
-
419
- $element->add_control(
420
- 'logo_color_black_before',
421
- [
422
- 'label' => __( 'Black Logo', 'she-header' ),
423
- 'type' => Controls_Manager::SWITCHER,
424
- 'label_on' => __( 'On', 'she-header' ),
425
- 'label_off' => __( 'Off', 'she-header' ),
426
- 'return_value' => 'yes',
427
- 'default' => '',
428
- 'frontend_available' => true,
429
- 'description' => __( 'Change the logo to black', 'she-header' ),
430
- 'prefix_class' => 'she-header-change-logo-color-',
431
- 'condition' => [
432
- 'change_logo_color' => 'yes',
433
- 'transparent!' => '',
434
- ],
435
- 'selectors' => [
436
- '{{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;',
437
- '{{WRAPPER}} .logo img' => '-webkit-filter: brightness(0) invert(0) !important; filter: brightness(0) invert(0) !important; transition: all .4s ease-in-out 0s;',
438
- ],
439
- ]
440
- );
441
-
442
- $element->end_controls_tab();
443
-
444
- // ---------------------------------- LOGO AFTER TAB
445
-
446
- $element->start_controls_tab(
447
- 'after_tab',
448
- [
449
- 'label' => __( 'After Scrolling', 'she-header' ),
450
- 'condition' => [
451
- 'change_logo_color' => 'yes',
452
- 'transparent!' => '',
453
- ],
454
- ]
455
- );
456
-
457
- // ---------------------------------- LOGO WHITE AFTER
458
-
459
- $element->add_control(
460
- 'logo_color_white_after',
461
- [
462
- 'label' => __( 'White Logo', 'she-header' ),
463
- 'type' => Controls_Manager::SWITCHER,
464
- 'label_on' => __( 'On', 'she-header' ),
465
- 'label_off' => __( 'Off', 'she-header' ),
466
- 'return_value' => 'yes',
467
- 'default' => '',
468
- 'frontend_available' => true,
469
- 'description' => __( 'Change the logo to white', 'she-header' ),
470
- 'prefix_class' => 'she-header-change-logo-color-',
471
- 'condition' => [
472
- 'change_logo_color' => 'yes',
473
- 'transparent!' => '',
474
- ],
475
- 'selectors' => [
476
- '{{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;',
477
- '{{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;',
478
- ],
479
- ]
480
- );
481
-
482
- // ---------------------------------- LOGO BLACK AFTER
483
-
484
- $element->add_control(
485
- 'logo_color_black_after',
486
- [
487
- 'label' => __( 'Black Logo', 'she-header' ),
488
- 'type' => Controls_Manager::SWITCHER,
489
- 'label_on' => __( 'On', 'she-header' ),
490
- 'label_off' => __( 'Off', 'she-header' ),
491
- 'return_value' => 'yes',
492
- 'default' => '',
493
- 'frontend_available' => true,
494
- 'description' => __( 'Change the logo to black', 'she-header' ),
495
- 'prefix_class' => 'she-header-change-logo-color-',
496
- 'condition' => [
497
- 'change_logo_color' => 'yes',
498
- 'transparent!' => '',
499
- ],
500
- 'selectors' => [
501
- '{{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;',
502
- '{{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;',
503
- ],
504
- ]
505
- );
506
-
507
- // ---------------------------------- LOGO FULL COLOR AFTER
508
-
509
- $element->add_control(
510
- 'logo_color_full_after',
511
- [
512
- 'label' => __( 'Full Color Logo', 'she-header' ),
513
- 'type' => Controls_Manager::SWITCHER,
514
- 'label_on' => __( 'On', 'she-header' ),
515
- 'label_off' => __( 'Off', 'she-header' ),
516
- 'return_value' => 'yes',
517
- 'default' => '',
518
- 'frontend_available' => true,
519
- 'description' => __( 'Removes all filters to allow a full color logo image', 'she-header' ),
520
- 'prefix_class' => 'she-header-change-logo-color-',
521
- 'condition' => [
522
- 'change_logo_color' => 'yes',
523
- 'transparent!' => '',
524
- ],
525
- 'selectors' => [
526
- '{{WRAPPER}} .elementor-widget-theme-site-logo img.change-logo-color' => '-webkit-filter: brightness(1) invert(0) !important; filter: brightness(1) invert(0) !important; transition: all .4s ease-in-out 0s;',
527
- '{{WRAPPER}} .logo img.change-logo-color' => '-webkit-filter: brightness(1) invert(0) !important; filter: brightness(1) invert(0) !important; transition: all .4s ease-in-out 0s;',
528
- ],
529
- ]
530
- );
531
-
532
- $element->end_controls_tab();
533
- $element->end_controls_tabs();
534
-
535
- $element->add_control(
536
- 'blur_bg',
537
- [
538
- 'label' => __( 'Blur Background', 'she-header' ),
539
- 'type' => Controls_Manager::SWITCHER,
540
- 'separator' => 'before',
541
- 'label_on' => __( 'On', 'she-header' ),
542
- 'label_off' => __( 'Off', 'she-header' ),
543
- 'return_value' => 'yes',
544
- 'default' => '',
545
- 'frontend_available' => true,
546
- 'condition' => [
547
- 'transparent!' => '',
548
- ],
549
- 'description' => __( 'Add a modern blur effect to a semi-transparent header background color after scrolling', 'she-header' ),
550
- ]
551
- );
552
-
553
- $element->add_control(
554
- 'hide_header',
555
- [
556
- 'label' => __( 'Hide header on scroll down', 'she-header' ),
557
- 'type' => Controls_Manager::SWITCHER,
558
- 'separator' => 'before',
559
- 'label_on' => __( 'On', 'she-header' ),
560
- 'label_off' => __( 'Off', 'she-header' ),
561
- 'return_value' => 'yes',
562
- 'default' => '',
563
- 'frontend_available' => true,
564
- 'description' => __( 'Hides the header if scrolling down, and shows header if scrolling up', 'she-header' ),
565
- 'prefix_class' => 'she-header-hide-on-scroll-',
566
- 'condition' => [
567
- 'transparent!' => '',
568
- ],
569
- ]
570
- );
571
-
572
- $element->add_control(
573
- 'hide_header_notice',
574
- [
575
- 'raw' => __('WARNING: This might break section/container entrance animations', 'she-header'),
576
- 'type' => Controls_Manager::RAW_HTML,
577
- 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
578
- 'condition' => [
579
-
580
- 'hide_header' => 'yes',
581
- 'transparent!' => '',
582
- ],
583
- ]
584
- );
585
-
586
- $element->add_responsive_control(
587
- 'scroll_distance_hide_header',
588
- [
589
- 'label' => __( 'Scroll Distance (px)', 'she-header' ),
590
- 'type' => Controls_Manager::SLIDER,
591
- 'default' => [
592
- 'size' => 500,
593
- ],
594
- 'range' => [
595
- 'px' => [
596
- 'min' => 0,
597
- 'max' => 1000,
598
- ],
599
- ],
600
- 'size_units' => [ 'px'],
601
- 'description' => __( 'Choose the scroll distance to start hiding the header', 'she-header' ),
602
- 'frontend_available' => true,
603
- 'condition' => [
604
- 'hide_header' => 'yes',
605
- 'transparent!' => '',
606
- ],
607
- ]
608
- );
609
-
610
- $element->end_controls_section();
611
- }
612
-
613
- private function add_actions() {
614
- if( !function_exists('is_plugin_active') ) {
615
-
616
- include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
617
-
618
- }
619
-
620
- if( is_plugin_active( 'elementor-pro/elementor-pro.php' ) ) {
621
- add_action( 'elementor/element/section/section_effects/after_section_end', [ $this, 'register_controls' ] );
622
- } else {
623
- add_action( 'elementor/element/section/section_advanced/after_section_end', [ $this, 'register_controls' ] );
624
- }
625
-
626
- add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] );
627
- if (Elementor\Plugin::instance()->editor->is_edit_mode()) {
628
- }else{
629
- add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
630
- }
631
-
632
- if( is_plugin_active( 'elementor-pro/elementor-pro.php' ) ) {
633
- add_action( 'elementor/element/container/section_effects/after_section_end', [ $this, 'register_controls' ] );
634
- } else {
635
- add_action( 'elementor/element/container/section_advanced/after_section_end', [ $this, 'register_controls' ] );
636
- }
637
-
638
- }
639
-
640
- public function enqueue_styles() {
641
- $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
642
-
643
- wp_enqueue_style(
644
- 'she-header-style',
645
- SHE_HEADER_ASSETS_URL . 'css/she-header-style' . '.css',
646
- [],
647
- SHE_HEADER_VERSION
648
- );
649
-
650
- }
651
-
652
- public function enqueue_scripts() {
653
- $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
654
-
655
- wp_enqueue_script(
656
- 'she-header',
657
- SHE_HEADER_URL . 'assets/js/she-header.js',
658
- [
659
- 'jquery',
660
- ],
661
- SHE_HEADER_VERSION,
662
- false
663
- );
664
- }
665
-
666
-
667
- }
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
+
327
+ 'condition' => [
328
+ 'shrink_header_logo' => 'yes',
329
+ 'transparent!' => '',
330
+ ],
331
+ 'frontend_available' => true,
332
+ 'selectors' => [
333
+ '{{WRAPPER}}.she-header .elementor-widget-theme-site-logo, {{WRAPPER}}.she-header .elementor-widget-image' => '-webkit-transform: scale(calc({{SIZE}}/100)) !important;-ms-transform: scale(calc({{SIZE}}/100)) !important;transform: scale(calc({{SIZE}}/100)) !important; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;',
334
+ ],
335
+ ]
336
+ );
337
+
338
+ // ---------------------------------- LOGO COLOR TOGGLE
339
+
340
+ $element->add_control(
341
+ 'change_logo_color',
342
+ [
343
+ 'label' => __( 'Change Logo Color', 'she-header' ),
344
+ 'type' => Controls_Manager::SWITCHER,
345
+ 'separator' => 'before',
346
+ 'label_on' => __( 'On', 'she-header' ),
347
+ 'label_off' => __( 'Off', 'she-header' ),
348
+ 'return_value' => 'yes',
349
+ 'default' => '',
350
+ 'frontend_available' => true,
351
+ 'description' => __( 'Change the logo image color before or after the user reaches the scroll distance set above', 'she-header' ),
352
+ 'condition' => [
353
+ 'transparent!' => '',
354
+ ],
355
+ ]
356
+ );
357
+
358
+ // ---------------------------------- LOGO COLOR NOTICE
359
+
360
+ $element->add_control(
361
+ 'logo_color_notice',
362
+ [
363
+ 'raw' => __( 'Note: These settings will override the CSS filters set under the logo style tab and might only work on the frontend', 'she-header' ),
364
+ 'type' => Controls_Manager::RAW_HTML,
365
+ 'content_classes' => 'elementor-descriptor',
366
+ 'condition' => [
367
+ 'change_logo_color' => 'yes',
368
+ 'transparent!' => '',
369
+ ],
370
+ ]
371
+ );
372
+
373
+ // ---------------------------------- LOGO COLOR TABS
374
+
375
+ $element->start_controls_tabs(
376
+ 'logo_color_tabs'
377
+ );
378
+
379
+ // ---------------------------------- LOGO BEFORE TAB
380
+
381
+ $element->start_controls_tab(
382
+ 'before_tab',
383
+ [
384
+ 'label' => __( 'Before scrolling', 'she-header' ),
385
+ 'condition' => [
386
+ 'change_logo_color' => 'yes',
387
+ 'transparent!' => '',
388
+ ],
389
+ ]
390
+ );
391
+
392
+ // ---------------------------------- LOGO WHITE BEFORE
393
+
394
+ $element->add_control(
395
+ 'logo_color_white_before',
396
+ [
397
+ 'label' => __( 'White Logo', 'she-header' ),
398
+ 'type' => Controls_Manager::SWITCHER,
399
+ 'label_on' => __( 'On', 'she-header' ),
400
+ 'label_off' => __( 'Off', 'she-header' ),
401
+ 'return_value' => 'yes',
402
+ 'default' => '',
403
+ 'frontend_available' => true,
404
+ 'description' => __( 'Change the logo to white', 'she-header' ),
405
+ 'prefix_class' => 'she-header-change-logo-color-',
406
+ 'condition' => [
407
+ 'change_logo_color' => 'yes',
408
+ 'transparent!' => '',
409
+ ],
410
+ 'selectors' => [
411
+ '{{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;',
412
+ '{{WRAPPER}} .logo img' => '-webkit-filter: brightness(0) invert(1) !important; filter: brightness(0) invert(1) !important; transition: all .4s ease-in-out 0s;',
413
+ ],
414
+ ]
415
+ );
416
+
417
+ // ---------------------------------- LOGO BLACK BEFORE
418
+
419
+ $element->add_control(
420
+ 'logo_color_black_before',
421
+ [
422
+ 'label' => __( 'Black Logo', 'she-header' ),
423
+ 'type' => Controls_Manager::SWITCHER,
424
+ 'label_on' => __( 'On', 'she-header' ),
425
+ 'label_off' => __( 'Off', 'she-header' ),
426
+ 'return_value' => 'yes',
427
+ 'default' => '',
428
+ 'frontend_available' => true,
429
+ 'description' => __( 'Change the logo to black', 'she-header' ),
430
+ 'prefix_class' => 'she-header-change-logo-color-',
431
+ 'condition' => [
432
+ 'change_logo_color' => 'yes',
433
+ 'transparent!' => '',
434
+ ],
435
+ 'selectors' => [
436
+ '{{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;',
437
+ '{{WRAPPER}} .logo img' => '-webkit-filter: brightness(0) invert(0) !important; filter: brightness(0) invert(0) !important; transition: all .4s ease-in-out 0s;',
438
+ ],
439
+ ]
440
+ );
441
+
442
+ $element->end_controls_tab();
443
+
444
+ // ---------------------------------- LOGO AFTER TAB
445
+
446
+ $element->start_controls_tab(
447
+ 'after_tab',
448
+ [
449
+ 'label' => __( 'After Scrolling', 'she-header' ),
450
+ 'condition' => [
451
+ 'change_logo_color' => 'yes',
452
+ 'transparent!' => '',
453
+ ],
454
+ ]
455
+ );
456
+
457
+ // ---------------------------------- LOGO WHITE AFTER
458
+
459
+ $element->add_control(
460
+ 'logo_color_white_after',
461
+ [
462
+ 'label' => __( 'White Logo', 'she-header' ),
463
+ 'type' => Controls_Manager::SWITCHER,
464
+ 'label_on' => __( 'On', 'she-header' ),
465
+ 'label_off' => __( 'Off', 'she-header' ),
466
+ 'return_value' => 'yes',
467
+ 'default' => '',
468
+ 'frontend_available' => true,
469
+ 'description' => __( 'Change the logo to white', 'she-header' ),
470
+ 'prefix_class' => 'she-header-change-logo-color-',
471
+ 'condition' => [
472
+ 'change_logo_color' => 'yes',
473
+ 'transparent!' => '',
474
+ ],
475
+ 'selectors' => [
476
+ '{{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;',
477
+ '{{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;',
478
+ ],
479
+ ]
480
+ );
481
+
482
+ // ---------------------------------- LOGO BLACK AFTER
483
+
484
+ $element->add_control(
485
+ 'logo_color_black_after',
486
+ [
487
+ 'label' => __( 'Black Logo', 'she-header' ),
488
+ 'type' => Controls_Manager::SWITCHER,
489
+ 'label_on' => __( 'On', 'she-header' ),
490
+ 'label_off' => __( 'Off', 'she-header' ),
491
+ 'return_value' => 'yes',
492
+ 'default' => '',
493
+ 'frontend_available' => true,
494
+ 'description' => __( 'Change the logo to black', 'she-header' ),
495
+ 'prefix_class' => 'she-header-change-logo-color-',
496
+ 'condition' => [
497
+ 'change_logo_color' => 'yes',
498
+ 'transparent!' => '',
499
+ ],
500
+ 'selectors' => [
501
+ '{{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;',
502
+ '{{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;',
503
+ ],
504
+ ]
505
+ );
506
+
507
+ // ---------------------------------- LOGO FULL COLOR AFTER
508
+
509
+ $element->add_control(
510
+ 'logo_color_full_after',
511
+ [
512
+ 'label' => __( 'Full Color Logo', 'she-header' ),
513
+ 'type' => Controls_Manager::SWITCHER,
514
+ 'label_on' => __( 'On', 'she-header' ),
515
+ 'label_off' => __( 'Off', 'she-header' ),
516
+ 'return_value' => 'yes',
517
+ 'default' => '',
518
+ 'frontend_available' => true,
519
+ 'description' => __( 'Removes all filters to allow a full color logo image', 'she-header' ),
520
+ 'prefix_class' => 'she-header-change-logo-color-',
521
+ 'condition' => [
522
+ 'change_logo_color' => 'yes',
523
+ 'transparent!' => '',
524
+ ],
525
+ 'selectors' => [
526
+ '{{WRAPPER}} .elementor-widget-theme-site-logo img.change-logo-color' => '-webkit-filter: brightness(1) invert(0) !important; filter: brightness(1) invert(0) !important; transition: all .4s ease-in-out 0s;',
527
+ '{{WRAPPER}} .logo img.change-logo-color' => '-webkit-filter: brightness(1) invert(0) !important; filter: brightness(1) invert(0) !important; transition: all .4s ease-in-out 0s;',
528
+ ],
529
+ ]
530
+ );
531
+
532
+ $element->end_controls_tab();
533
+ $element->end_controls_tabs();
534
+
535
+ $element->add_control(
536
+ 'blur_bg',
537
+ [
538
+ 'label' => __( 'Blur Background', 'she-header' ),
539
+ 'type' => Controls_Manager::SWITCHER,
540
+ 'separator' => 'before',
541
+ 'label_on' => __( 'On', 'she-header' ),
542
+ 'label_off' => __( 'Off', 'she-header' ),
543
+ 'return_value' => 'yes',
544
+ 'default' => '',
545
+ 'frontend_available' => true,
546
+ 'condition' => [
547
+ 'transparent!' => '',
548
+ ],
549
+ 'description' => __( 'Add a modern blur effect to a semi-transparent header background color after scrolling', 'she-header' ),
550
+ ]
551
+ );
552
+
553
+ $element->add_control(
554
+ 'hide_header',
555
+ [
556
+ 'label' => __( 'Hide header on scroll down', 'she-header' ),
557
+ 'type' => Controls_Manager::SWITCHER,
558
+ 'separator' => 'before',
559
+ 'label_on' => __( 'On', 'she-header' ),
560
+ 'label_off' => __( 'Off', 'she-header' ),
561
+ 'return_value' => 'yes',
562
+ 'default' => '',
563
+ 'frontend_available' => true,
564
+ 'description' => __( 'Hides the header if scrolling down, and shows header if scrolling up', 'she-header' ),
565
+ 'prefix_class' => 'she-header-hide-on-scroll-',
566
+ 'condition' => [
567
+ 'transparent!' => '',
568
+ ],
569
+ ]
570
+ );
571
+
572
+ $element->add_control(
573
+ 'hide_header_notice',
574
+ [
575
+ 'raw' => __('WARNING: This might break section/container entrance animations', 'she-header'),
576
+ 'type' => Controls_Manager::RAW_HTML,
577
+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
578
+ 'condition' => [
579
+
580
+ 'hide_header' => 'yes',
581
+ 'transparent!' => '',
582
+ ],
583
+ ]
584
+ );
585
+
586
+ $element->add_responsive_control(
587
+ 'scroll_distance_hide_header',
588
+ [
589
+ 'label' => __( 'Scroll Distance (px)', 'she-header' ),
590
+ 'type' => Controls_Manager::SLIDER,
591
+ 'default' => [
592
+ 'size' => 500,
593
+ ],
594
+ 'range' => [
595
+ 'px' => [
596
+ 'min' => 0,
597
+ 'max' => 1000,
598
+ ],
599
+ ],
600
+ 'size_units' => [ 'px'],
601
+ 'description' => __( 'Choose the scroll distance to start hiding the header', 'she-header' ),
602
+ 'frontend_available' => true,
603
+ 'condition' => [
604
+ 'hide_header' => 'yes',
605
+ 'transparent!' => '',
606
+ ],
607
+ ]
608
+ );
609
+
610
+ $element->end_controls_section();
611
+ }
612
+
613
+ private function add_actions() {
614
+ if( !function_exists('is_plugin_active') ) {
615
+
616
+ include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
617
+
618
+ }
619
+
620
+ if( is_plugin_active( 'elementor-pro/elementor-pro.php' ) ) {
621
+ add_action( 'elementor/element/section/section_effects/after_section_end', [ $this, 'register_controls' ] );
622
+ } else {
623
+ add_action( 'elementor/element/section/section_advanced/after_section_end', [ $this, 'register_controls' ] );
624
+ }
625
+
626
+ add_action( 'elementor/frontend/after_enqueue_styles', [ $this, 'enqueue_styles' ] );
627
+ if (Elementor\Plugin::instance()->editor->is_edit_mode()) {
628
+ }else{
629
+ add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts' ] );
630
+ }
631
+
632
+ if( is_plugin_active( 'elementor-pro/elementor-pro.php' ) ) {
633
+ add_action( 'elementor/element/container/section_effects/after_section_end', [ $this, 'register_controls' ] );
634
+ } else {
635
+ add_action( 'elementor/element/container/section_advanced/after_section_end', [ $this, 'register_controls' ] );
636
+ }
637
+
638
+ }
639
+
640
+ public function enqueue_styles() {
641
+ $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
642
+
643
+ wp_enqueue_style(
644
+ 'she-header-style',
645
+ SHE_HEADER_ASSETS_URL . 'css/she-header-style' . '.css',
646
+ [],
647
+ SHE_HEADER_VERSION
648
+ );
649
+
650
+ }
651
+
652
+ public function enqueue_scripts() {
653
+ $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
654
+
655
+ wp_enqueue_script(
656
+ 'she-header',
657
+ SHE_HEADER_URL . 'assets/js/she-header.js',
658
+ [
659
+ 'jquery',
660
+ ],
661
+ SHE_HEADER_VERSION,
662
+ false
663
+ );
664
+ }
665
+
666
+
667
+ }
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.4
10
  License: GPLv2 or later
11
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
12
 
@@ -91,6 +91,11 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
91
 
92
  == Changelog ==
93
 
 
 
 
 
 
94
  = 1.5.4 =
95
  - Fixed: Shrinking Logo bug
96
 
@@ -193,6 +198,11 @@ Sticky Header Options for Elementor is light-weight and you can also use only th
193
 
194
  == Upgrade Notice ==
195
 
 
 
 
 
 
196
  = 1.5.4 =
197
  Fixed: Shrinking Logo bug
198
 
6
  Requires at least: 4.9.0
7
  Tested up to: 6.0
8
  Requires PHP: 5.4
9
+ Stable tag: 1.5.5
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.5 =
95
+ - Fixed: Shrinking Logo bug
96
+ - Fixed: Header section top position
97
+ - Maintenence: Optimized CSS code
98
+
99
  = 1.5.4 =
100
  - Fixed: Shrinking Logo bug
101
 
198
 
199
  == Upgrade Notice ==
200
 
201
+ = 1.5.5 =
202
+ Fixed: Shrinking Logo bug
203
+ Fixed: Header section top position
204
+ Maintenence: Optimized CSS code
205
+
206
  = 1.5.4 =
207
  Fixed: Shrinking Logo bug
208
 
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.4
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.4' );
23
  define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.5.3' );
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.5
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.5' );
23
  define( 'SHE_HEADER_PREVIOUS_STABLE_VERSION', '1.5.3' );
24
 
25
  define( 'SHE_HEADER__FILE__', __FILE__ );