Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1252648

    Hi,

    I have been trying to replicate the feature that’s available on DESKTOP [header behaviour >> Sticky Header & Unstick topbar] on a small device (mobile and tablets. Following the thread and trying to add the code by MIKE [https://kriesi.at/support/topic/unstick-topbar-on-mobile/] I could go somewhat closer to what I want however, I have few issues :

    1. The transition is not any smooth
    2. The banner also moves up as I try that.

    It would be a great help if you could assist me.

    Thanks.

    Here’s the code I used:

    function custom_hide_top_script(){
    ?>
    <script>
    (function($){
    $(window).scroll(function(){
    var width = $(window).width();
    var scrolled = $(window).scrollTop();
    if ( scrolled >= 5 && width <= 767) {
    $( ‘#header’ ).each(function() {
    $(this).css({‘background-color’:’#ffffff’,’position’:’fixed’,’top’:’-110px’});
    $(‘#full_slider_1’).css({‘padding-top’:’10px’});
    });
    }
    else if ( scrolled <= 60 && width <= 767){
    $( ‘#header’ ).each(function() {
    $(this).css({‘background-color’:’#ffffff’,’position’:’relative’,’top’:’0′});
    $(‘#full_slider_1’).css({‘padding-top’:’0px’});
    });
    } else {}
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘custom_hide_top_script’);

    #1253542

    Hey namgyal,
    Sorry for the late reply, and thanks for the link to your site. As I understand your question, you would like the topbar to show on mobile and have it scroll away until the header reaches the top, which will be sticky?
    Is this a testing site, can we login?
    I notice that your topbar is quite large on mobile, you can check with this css:

    @media only screen and (max-width: 767px) {
    #top #header_meta {
        display: block !important;
    }
    }

    Is this the final size that you intend?

    Best regards,
    Mike

    #1253549

    Hi Mike,

    Thanks for your reply. Sorry I had to change a bit on the website link as some more edits had to be made so I had hidden the top bar. Anyway, if you check the link (new link provided below) on a mobile device…I want the same #top #header_meta (or TOPBAR) NOT TO BE STICKY while the main menu to be sticky. The issue now is:

    1. While scrolling, the TOP BAR MENU does scroll up – but it does not LOOK smooth at all…(I want the same as it is for the DESKTOP version now)
    2. When scrolling on MOBILE, don’t know why the Banner image goes up [please check the link provided]

    I have used the code you provided at https://kriesi.at/support/topic/unstick-topbar-on-mobile (codes below).

    Thank you very much.

    @media only screen and (max-width: 1023px){
    .top-sticky {
    display: none;
    }
    .top-sticky.top-show {
    display: block;
    }
    .responsive #top #wrap_all #header + #header_meta.top-sticky {
    top: 0 !important;
    }
    }

    And this at functions.php:

    function custom_hide_top_script(){
    ?>
    <script>
    (function($){
    $(window).scroll(function(){
    var width = $(window).width();
    var scrolled = $(window).scrollTop();
    if ( scrolled >= 100 && width <= 767) {
    $( ‘#header’ ).each(function() {
    $(this).css({‘background-color’:’#ffffff’,’position’:’fixed’,’top’:’-100px’});
    $(‘#full_slider_1’).css({‘padding-top’:’10px’});
    });
    }
    else if ( scrolled <= 60 && width <= 767){
    $( ‘#header’ ).each(function() {
    $(this).css({‘background-color’:’#ffffff’,’position’:’relative’,’top’:’0′});
    $(‘#full_slider_1’).css({‘padding-top’:’0px’});
    });
    } else {}
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘custom_hide_top_script’);

    #1253667

    Hi,
    Thank you for the video and the new link, I understand better now, the script from the thread was for a slightly different issue, for you, I see portions that should be removed. Please remove the script above from your functions.php so I can test some changes on my end, or please include admin login in the Private Content area so we can test directly.

    Best regards,
    Mike

    #1253721

    Thanks for the reply Mike. Sure will share the login credentials (in private). Thanks.

    #1254644

    Hi,
    Sorry for the late reply and thanks for the login, I’m finding this css injected into your page:

    <style type="text/css" media="screen">
    	html { margin-top: 32px !important; }
    	* html body { margin-top: 32px !important; }
    	@media screen and ( max-width: 782px ) {
    		html { margin-top: 46px !important; }
    		* html body { margin-top: 46px !important; }
    	}
    </style>

    I would like to remove this because !important; is hard to overcome, but I’m not finding the source.
    I looked at your custom css & js plugin,
    WordPress > Customize > Additional CSS,
    Enfold Theme Options > General Styling > Quick CSS field,
    and the custom.css in the Enfold theme.
    Does the above look like something you might have added? Any thoughts on where?

    Best regards,
    Mike

    #1254706

    hi Mike,

    Thanks for the reply.

    I did check all the CSS – but I don’t think I had added any of these….max-width: 782px looks a bit odd (I’d normally use 767 or 768). I only used CSS on Enfold defaults and using the custom CSS & JS plugin…by any chance it could be from a plugin? I deactivated this Shortcode in Menus Can you check please?

    Thanks.

    #1254707

    Hi Mike

    Does it seem the code has been added from wp-core itself?! Please check this forum: https://wordpress.stackexchange.com/questions/200352/wp-head-gives-me-some-weird-css

    I believe – adding this should get rid of it…can you please check? Thanks.

    add_action(‘get_header’, ‘my_filter_head’);

    function my_filter_head() {
    remove_action(‘wp_head’, ‘_admin_bar_bump_cb’);
    }

    • This reply was modified 1 day, 9 hours ago by  namgyal.
    • This reply was modified 1 day, 9 hours ago by  namgyal.
    • This reply was modified 1 day, 9 hours ago by  namgyal.
    #1254971

    Hi,
    Thank you, I disabled the admin toolbar for my user account in the user settings, when you test you may wish to do the same.
    I adjusted the script and added it to your functions.php and it seems to work well, please check.
    This is the script I added:

    function custom_script(){
      ?>
      <script>
    (function($){
    $(window).scroll(function(){
    var width = $(window).width();
    var scrolled = $(window).scrollTop();
    if ( scrolled >= 110 && width <= 767) {
    $( '#header' ).each(function() {
    $(this).css({'background-color':'#ffffff','position':'fixed','top':'-110px'});
    $('#main').css({'margin-top':'185px'});
    });
    }
    else if ( scrolled <= 110 && width <= 767){
    $( '#header' ).each(function() {
    $(this).css({'background-color':'#ffffff','position':'relative','top':'0'});
    $('#main').css({'margin-top':'0px'});
    });
    } else {}
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    Best regards,
    Mike

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.