Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #732777

    Hi,

    I have set a project on my local server – a page with a full height slider and transparent header set with following css:

    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency {
    background: transparent;
    position: absolute!important;
    }
    .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 0 !important;
    }
    .responsive #top .av_header_transparency .logo img.alternate {
    display: block !important;
    }
    } 

    What I want to do is – to prevent transformation of the transparent header on mobile screen into white(normal) when swiping down the contents. Is it possbile to disable this behaviour? It doesn`t let me scroll to properly see the whole contents of the next section.

    Regards

    #732851

    Hi L!

    It will be really hard to help you if we can not see the page, we are sorry
    Please feel free to create a ticket for us, when you upload the page live and we will be happy to help.

    Thank you

    Regards,
    Basilis

    #732869

    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.

    #734123

    Hi,

    Please deactivate all plugins one by one to check which one is causing this issue and let us know if this solves the problem.

    Best regards,
    Yigit

    #734166

    Hi Yigit,

    In fact this is not an issue with any plugins. It is a default behavior how the Enfold theme header on mobile is working. Add the custom CSS I`ve posted on the first post on any Enfold site that is using a full-screen slider with transparent header. You will see what happens when you scroll down a bit.

    Regards

    #735188

    Hi,

    I can’t reproduce the issue on my installation, maybe I don’t have the exact settings. Could you please provide the login details so that we can check page settings? What is the original purpose of the css modifications above? Why do you need it? I added it in my installation but it’s not doing anything, again, maybe because of the page settings or layout.

    Best regards,
    Ismael

    #735298

    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

    #736775

    Hi!

    Could you please provide an access to the dashboard? We would like to check the actual settings of the page and the css modification.

    Cheers!
    Ismael

    #736985

    Hi, Ismael!

    I attached everything I have set in the private area. Let me know if that will be sufficient for you to replicate the issue.

    Regards

    #738675

    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, 2 months ago by L.
    #738761

    Hi,

    Alright. I can see it now. The problem is caused by the class attribute “av_header_transparency” being removed on scroll. Please replace the css code with the following:

    @media only screen and (max-width: 767px) {
      #top #wrap_all .header_color {
        background: transparent;
        position: absolute!important;
      }
    
      .responsive #top .header_color.av_alternate_logo_active .logo a > img {
        opacity: 0 !important;
      }
    
      .responsive #top .header_color .logo img.alternate {
        display: block !important;
      }
    
      .responsive #top .header_color #header_meta {
          -webkit-transition: none;
          transition: none;
          background: transparent;
      }
    
      .responsive #top .header_color .header_bg {
          opacity: 0;
          filter: alpha(opacity=0);
      }
    
      .responsive #top .header_color #header_main {
          border: none;
      }
    }

    Best regards,
    Ismael

    #739142

    Hi, Ismael this code caused visual issues on other pages where we use default header, I didn`t applied it. If the class attribute “av_header_transparency” is being removed on scroll, can we set a custom function with jQuery for keeping the class attribute “av_header_transparency” on specific page or ignore the class attribute removal for specific screen width? Can we interact with the class attribute by telling to keep it on the specific page with jQuery? Or if we can remove the scroll rule

    Something like in this example:

    function add_custom_script(){
    ?>
    <script>
    jQuery(window).load(function(){
    if (jQuery(window).width() < 480) {
    <--CODE PART -->
    </script>
    <?php
    }
    }
    add_action('wp_footer', 'add_custom_script');

    Regards

    #739148

    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');
                    	}
                    }
    #740311

    Hi,

    Glad you figured it out and thank you for sharing your solution!

    Please add following code to Functions.php file of your child theme

    
    function wp_change_aviajs() {
       wp_dequeue_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
    }
    add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );

    and move modified file inside /js folder

    Best regards,
    Yigit

    #1021236

    Hi Yigit,

    Could you update the answer to the latest version of Enfold? I am trying to achieve the same thing but now the code is on js/avia-snippet-sticky-header.js.

    I follow the code and notice in the function.php it add the script via
    avia_enqueue_script_conditionally( $condition2 , 'avia-sticky-header', $template_url."/js/avia-snippet-sticky-header.js", array('avia-default'), $vn, true);
    but tried editing the avia-snippet-sticky-header.js to the above but is not being updated.

    Please advise

    Thanks

    • This reply was modified 5 years, 5 months ago by mathswizard.
    #1021443

    Hi,

    Try to dequeue or deregister the header script first and then register it back in your child theme.

    // https://codex.wordpress.org/Function_Reference/wp_deregister_script
    // https://codex.wordpress.org/Function_Reference/wp_dequeue_script

    Best regards,
    Ismael

    #1021563

    Hi,
    Tried already.
    In my function file of my child theme

    function wp_change_aviajs() {
       wp_dequeue_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('jquery'), 2, true );
    }
    add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );

    If you seen my responsive mobile view, you saw that the menu just disappear and appear again when you scroll down.

    #1022150

    Hi,

    Thanks for the update. The script handle should be “avia-sticky-header”, not “avia-default”.

    Best regards,
    Ismael

Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.