Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1188986

    Hi, I have a problem at with my header disappearing on mobile devices when scrolling up to the top on my site https://www.scalpinnovation.dk
    Can anyone help me please?
    I have added this css:

    #header {

    transition: top of 1.5s;
    transition-timing-function: ease;

    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    }

    .responsive #top #wrap_all #header {

    position: fixed;

    }

    .av_header_transparency, header {
    background:
       transparent !important;
    }

    #header {
    background:
    transparent !important;
    }

    @media only screen and (max-width: 989px){
    .av_header_transparency .av-hamburger-inner::after, .av_header_transparency .av-hamburger-inner::before, .av-hamburger-inner {
    background-color: #fff !important;
    }

    .av_header_transparency .logo a img {
    opacity: 1;
    filter: invert(1);
    }

    Thanks 🙏🏻 Carsten

    #1189247

    Hey Carsten,
    Sorry for the late reply, I have looked at your site on mobile but I don’t see that your header is disappearing on scroll up, I only see it return to the transparent state. Which browser are you seeing this on?
    I also looked at your css above, but don’t see anything that might cause this.
    Do you have the ability to make a screencast of the error and post the link to it in the Private Content area?

    Best regards,
    Mike

    #1189326

    Hi Mike, before I posted this problem it was nearly working, except for the header that completely disappeared when scrolling to the top.
    After I updated my theme yesterday it totally didn’t work.

    Please see my video in the link below.

    I have really worked hard to make this work like Rolex.com so I hope you can fix it to work on both mobile and desktop devices.

    Thanks 🙏🏻 Carsten

    #1189327

    I don’t know if this conflict but I have added this to my Quick CSS as well :

    /*— CARSTEN’S CSS Styles Burger menu START —*/
    .av-active-burger-items{
    text-transform: none !important;
    font-size: 20px !important;
    line-height: 100% !important;
    font-weight: !important;
    color: #ffffff !important;
    letter-spacing: 2px !important;
    padding: 12px 0px !important;
    }
    /*— CARSTEN’S CSS Styles Burger menu SLUT —*/

    /*— CARSTEN’S CSS Styles scroll to top START —*/
    @media only screen and (max-width: 767px) {
    .responsive #scroll-top-link {
    display: block;
    }}

    #scroll-top-link { background-color: #c1c1c1; color: #000000; border: 1px solid #626262 !important;
    }
    /*— CARSTEN’S CSS Styles scroll to top SLUT —*/

    #1190024

    Hi,
    Sorry for the late reply and thanks for the video, I believe what you are asking is to have the header disappear on scroll down and then show on scrolling up like Rolex.com – correct?
    We don’t have a built-in way to do this but this script has worked for others:
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function show_header_scroll_down(){
      ?>
      <script>
    ( function( $ ) {
    
        'use strict';
    
        var $window       = $( window );
        var lastScrollTop = 0;
        var $header       = $( '#header_main' );
        var headerBottom  = $header.position().top + $header.outerHeight( true );
    
        $window.scroll( function() {
                var windowTop  = $window.scrollTop();
    
                // Add custom sticky class 
                if ( windowTop >= headerBottom ) {
                    $header.addClass( 'myprefix-maybe-sticky' );
                } else {
                    $header.removeClass( 'myprefix-maybe-sticky' );
                    $header.removeClass( 'myprefix-show' );
                }
    
                // Show/hide
                if ( $header.hasClass( 'myprefix-maybe-sticky' ) ) {
                    if ( windowTop <= headerBottom || windowTop < lastScrollTop ) {
                        $header.addClass( 'myprefix-show' );
                    } else {
                        $header.removeClass( 'myprefix-show' );
                    }
                }
                lastScrollTop = windowTop;
        } );
    } ( jQuery ) );
    </script>
    <?php
    }
    add_action('wp_footer', 'show_header_scroll_down');

    then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .myprefix-maybe-sticky {
    		    position: fixed !important;
    		    top: -100px;
    		    width: 100%;
    		    z-index: 999;
    		    opacity: 0;
    		    background: #fff;
    		    transition: 0.3s all;
    		    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    		}
    
    		.myprefix-show {
    		    top: 0;
    		    opacity: 1;
    		}

    Please see the video in the Private Content area.
    If this doesn’t work for you it’s probably because you have a gtag script error Uncaught SyntaxError: Invalid or unexpected token please include an admin login so we can adjust.

    Best regards,
    Mike

    #1190122
    This reply has been marked as private.
    #1190851

    Hi,
    Sorry for the late reply and thanks for the login. I added the function and the css to your site and tested mobile and desktop and it seems to be working correct. Please clear your browser cache and check.
    Please see the video in Private Content area of what I’m seeing now.

    Best regards,
    Mike

    #1190875
    This reply has been marked as private.
    #1191022

    Hi,
    Thank you for the video, I made an adjustment to how far down the header shows, please clear your browser cache and check.

    Best regards,
    Mike

    #1191050

    Hi Mike.
    Yes it seams that its working now. Thank you so much 🙏.
    You are the best 🔥
    Thanks again for your support – Carsten

    #1191051

    Btw… what is the best way to add video from youtube so the page doesn’t load slow?

    #1191072

    Hi,

    Only would be to try to optimize the video for the web:

    Or run less scripting on the page where the videos will be located.

    Best regards,
    Jordan Shannon

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