I just found the solution by editing robots.txt and adding a line:

User-agent: *
Disallow: /wp-content/themes/enfold/framework/

I found that this behaviour is done by the code between lines 1654 and 1662 in enfold/js/avia.js :

if(transparent)
                {	
                	if(st > 50)
                	{	
                		//header.removeClass('av_header_transparency');
                		av_change_class(header, 'remove', 'av_header_transparency');
                	}
                	else
                	{
                		//header.addClass('av_header_transparency');
                		av_change_class(header, 'add', 'av_header_transparency');
                	}
                }

Can we set a function to override the av_change_class(header, 'remove', 'av_header_transparency'); and keep the av_change_class(header, 'add', 'av_header_transparency'); for screen width under 767px?

Regards

Update:

I edited the code by changing the line from ‘if(st > 50)’ to ‘if(st > 50 && window.innerWidth >767)’ and now it works, the only thing is how to keep this code when updating theme?

if(transparent)
                {	
                	if(st > 50 && window.innerWidth >767)
                	{	
                		//header.removeClass('av_header_transparency');
                		av_change_class(header, 'remove', 'av_header_transparency');
                	}
                	else
                	{
                		//header.addClass('av_header_transparency');
                		av_change_class(header, 'add', 'av_header_transparency');
                	}
                }

Hi,

I have found something similar on this forum using Google search. The issue is very similar to mine. This reply could be a fix, but I need to adapt it to be suitable on all pages on mobile screen width not single page like it was done in this example: https://kriesi.at/support/topic/disable-sticky-header-for-single-page/#post-286419

Maybe Josue could be so kind and help me out here?

How can I stop this header shrinking and transformation on mobile and fix the header transparent only with transparent logo and transparent color setup?

Thanks

• This reply was modified 7 years, 7 months ago by L.

Hi Ismael,

The purpose of the CSS is to set the header on mobile transparent with white (transparent header) logo. To check this:
1 you have to create a page with full-screen slider;
2 set the page header to transparent;
3 add the custom CSS

Then you can go and check the transparent header on mobile screen width. Scroll down a bit and you will see that the header is transforming to standard header. I want to prevent this transform on mobile and leave the header transparent. The reason for this is because the standard header is pushing the full-screen slider and its contents below the header. This results in wrong function of next section and doesn’t look good.

Regards

Hi Basilis,

It is nothing extremely specific. In fact you can try and inspect this behaviour on any of your enfold testing installation with an active transparent header. The header will transform to basic style (white or whatever it is set to) when you scroll down. What I need is to prevent this behaviour – the header transformation and leave it transparent. If it is possible with css, I can set media rule to limit that transformation prevention on mobile screen only.

Regards

I have attached the link to a website with transparent header. You can try to resize the browser and scroll down a bit and you will see that the header on mobile screen width is transforming from transparent to regular header and pushing the fullscreen slider below, which I would like to prevent.

Thanks Nikko,

I have added a line above the one you mentioned to test if it will work: $caption = ‘ <h3 class=”avia-caption-title”>TEST</h3>’;
It shows “TEST” above the title, so it will work. The question is – how do I get category link and name onto this line?

Here is the whole section of code that I have now:

foreach ($this->entries->posts as $slide)
			{
					$counter ++;
					$thumb_id = get_post_thumbnail_id( $slide->ID );
					$slide_class = "";
					$taxonomies  = get_object_taxonomies(get_post_type($the_id));
					
					$img 	 = wp_get_attachment_image_src($thumb_id, $this->atts['image_size']);
					$link	 = get_permalink( $slide->ID );
					$title	 = get_the_title( $slide->ID );
					
					
					$caption  = "";
 					$caption .= ' <div class="caption_fullwidth av-slideshow-caption caption_center">';
					$caption .= ' <div class="container caption_container">';
					$caption .= ' <div class="slideshow_caption">';
					$caption .= ' <div class="slideshow_inner_caption">';
					$caption .= ' <div class="slideshow_align_caption">';
					$caption .= ' <h3 class="avia-caption-title">TEST</h3>';
					$caption .= ' <h2 class="avia-caption-title"><a href="'.$link.'">'.$title.'</a></h2>';
			
					if(strpos($this->atts['contents'], 'excerpt')  !== false)
					{
						$excerpt = !empty($slide->post_excerpt) ? $slide->post_excerpt : avia_backend_truncate($slide->post_content, apply_filters( 'avf_feature_image_slider_excerpt_length' , 320) , apply_filters( 'avf_feature_image_slider_excerpt_delimiter' , " "), "…", true, '');
						
						if(!empty($excerpt)){
							$caption .= ' <div class="avia-caption-content " itemprop="description">';
							$caption .= wpautop($excerpt);
							$caption .= ' </div>';
						}
					}
		
					
					if(strpos($this->atts['contents'], 'read_more')  !== false)
					{
						$caption .= ' <a href="'.$link.'" class="avia-slideshow-button avia-button avia-color-light " data-duration="800" data-easing="easeInOutQuad">'.__('Read more', 'avia_framework').'</a>';
					
					}
					$caption .= ' </div>';
					$caption .= ' </div>';
					$caption .= ' </div>';
					$caption .= ' </div>';
					$caption .= $this->create_overlay();
					$caption .= ' </div>';
					
					$slide_data = "data-img-url='".$img[0]."'";
					
					if(empty($img)) $slide_class .= " av-no-image-slider";
					
					$html .= "<li {$slide_data} class='slide-{$counter} {$slide_class} slide-id-".$slide->ID."'>";
					$html .= $caption;
					$html .= "</li>";
			}

Thanks Yigit, it worked!

Hi Rikard,

I am hosting it on my localhost and the site cannot be accessed right now. Basically this is a question about this layout http://kriesi.at/themes/enfold-hotel/ where header is with centrred logo and menu below.

Regards

This is Enfold coded menu that comes with theme compatibility to WPML with Enfold added language switcher on top. How can this question not be directly related to the theme?

I can surely ask the WPML team about this but I am sure they will address me back to the theme developers.

Hey Andy,

Your solution is not working as I expected, but I have done this repositioning myself, setting the top WPML sidebar menu switcher positions to centre by adding the following lines:

.html_header_sidebar #top .avia_wpml_language_switch {
border-bottom-style: none;
position: relative;
left: 50%;
margin-left: -50px;
}

However, I am still in a need to replace the flags images with just the language names in text – “EN” and “RU”
I suppose that this switcher is the default that comes with the Enfold built-in compatibility for WPML plugin. Changing the WPML plugin settings in “Language switcher options” under “Language switcher style” and “What to include in the language switcher” settings doesn`t make any effect on the actual visual appearance with the WPML switcher in the sidebar menu. Please help.

Regards

I know that bumping this wouldn’t help but I think that you forgot about this topic.

Thanks Yigit! This did the job perfectly! I will also try out the plugin suggested by Basilis.

Hi Elliott!

The same on Windows Phone 8.1 default browser.

And if you take and resize it on google Chrome for desktop PC, then reload the page and click on mobile menu icon the menu appears with an extra side scrollbar. If you scroll to the end you can see the webpage contents. If you close and reopen the menu all is working fine again.