Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #1190587

    Hi folks,

    The sidebar is set to be on the left on desktop. I also set the sidebar to be “always sticky” though, on mobile devices it’s still scrollable. How can i fix that, so the menu bar on mobile device is sticky?

    #1190659

    Hey Christian,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #1190731

    short answer, nope :)
    site is not public yet.

    but you can look at your demo site – problem is there too

    • This reply was modified 3 years, 12 months ago by nomorebeans.
    #1191115

    Hi,
    I took a look at your “sidebar menu” settings in your screenshot and duplicated the “always sticky” setting for the “sidebar menu” which seems to work fine with v4.7.3. I note you are asking about it being sticky for mobile, but the “sidebar menu” doesn’t show below 767px, it changes to the burger menu, this is the “sidebar menu” at 768px:
    2020-03-07_071633.png
    and this is at 767px and below where it changes to the burger menu:
    2020-03-07_071912.png
    so I’m not sure what you mean by “on mobile devices it’s still scrollable”
    also on the /enfold-band/ demo you linked to there is no “sidebar menu”, it uses the top menu.

    Best regards,
    Mike

    #1191145

    but that header he could have in fixed position on top.

    can you try this in quick css:

    depends on your burger-menu break point ( when burger is shown – on the demo page 2017 it is at 990px )

    @media only screen and (min-width: 768px) and (max-width: 989px) {
      .responsive.html_mobile_menu_tablet #top #wrap_all #header {
        position: fixed;
      }
    }
    
    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all #header {
        position: fixed;
      }
      .responsive #top #main {
        padding-top: 80px !important;    /*** play with that - depends on your header-height ***/
      }
      #top .av_header_transparency .header_bg {
        background-color: #FFF;
      }
    }
    #1191149

    by the way ;) – dear mods – the example page shows a poor header behavior between 768px and 989px – see that ugly gray header.
    Allthough the padding-top of main is set to 0 ?

    #1191152

    maybe this could be a good alternative : not to have the overlay hamburger on top but shifted that amount of header height downwards:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
      .responsive.html_mobile_menu_tablet #top #wrap_all #header {
        position: fixed;
      }
      .av-burger-overlay, 
      .av-burger-overlay-bg {
        top:91px
      }
      
      .html_av-overlay-side-classic #av-burger-menu-ul {
        padding: 0 0 100px !important;
      }
      
      .responsive.html_header_transparency.av-burger-overlay-active #header.av_header_transparency #avia-menu a {
        color:#fff !important;
      }
    
      .html_av-overlay-side.av-burger-overlay-active #top .av_header_transparency .av-hamburger-inner,
      .html_av-overlay-side.av-burger-overlay-active #top .av_header_transparency .av-hamburger-inner::before,
      .html_av-overlay-side.av-burger-overlay-active #top .av_header_transparency .av-hamburger-inner::after {
       background-color: #fff 
      }
    }
    
    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all #header {
        position: fixed;
      }
      .responsive #top #main {
        padding-top: 80px !important;    /*** play with that - depends on your header-height ***/
      }
      #top .av_header_transparency .header_bg {
        background-color: #FFF;
      }
      .av-burger-overlay, 
      .av-burger-overlay-bg {
        top:81px
      }
      .html_av-overlay-side-classic #av-burger-menu-ul {
        padding: 0 0 100px !important;
      }
    }

    looks this way on opened hamburger between 768px and 989px

    #1191177

    Hi,

    @Guenni007
    thanks for the alternative, I will submit to the dev team for review.

    Best regards,
    Mike

    #1191227

    That is not something I would generally adopt in the subject. Just for this particular case: only ok for sticky header on responsive case with non-shrinking headers.
    Otherwise the top positioning of overlay and overlay-bg had to be calculated equal to header-height.

    #1191255

    Hi,
    Oh, I see, thanks.

    Best regards,
    Mike

    #1191296

    Hello Mike,

    guess I meant the burger menu then. Anyway, the issue is the “sticky” on mobile under 700ish px is gone. Made a screen capture to be more clear about it.

    The Menu (on every device) should be visible all the time – sticky (at the moment it’s not sticky on mobile)

    I know this was working before

    #1191313

    Hi,
    In the theme settings for the sticky header it is noted that the setting is “ignored on smartphones”
    Please try the css posted above by @Guenni007 for a mobile sticky header.

    Best regards,
    Mike

    #1191664

    Thanks guys,

    seems to work! :)

    UPDATE NOTICE 1

    I just made a look on a real mobile device at the site. I’m using a lot of fullscreen sliders, which are now a bit “jumpy” when scrolling up. If you scroll up, the fullscreen image resizes at a certain point and “jumps” to a bigger version, hiding the other elements like the arrow down button.

    Is there a way to fix that as well?

    This sticky menu thing was working better in previous versions.

    UPDATE NOTICE 2

    just realised it’s only “jumpy” in the mobile version of firefox on iOS devices. Safari on mobile works fine. with the css mod.
    Thanks again guys :)

    • This reply was modified 3 years, 11 months ago by nomorebeans.
    #1192242

    Hi,
    Thank you for the video, please link to your page so we can examine closer.

    Best regards,
    Mike

    #1192840

    Site is not public yet. But i just used the 1st css code from Guenni007. So if you paste that in any demo site of yours and use the Firefox App on iOS device you can examine everything.

    #1193104

    Hi,
    For a sticky header on mobile try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_sticky_header(){
      ?>
      <script>
    (function($){
      $(document).ready(function(){       
         var scroll_start = 0;
         var startchange = $('#header');
         var offset = startchange.offset();
          if (startchange.length){
         $(document).scroll(function() { 
            scroll_start = $(this).scrollTop();
            if(scroll_start > offset.top) {
              document.getElementById('header').classList.add('sticky-top');
             } else {
              document.getElementById('header').classList.remove('sticky-top');
             }
         });
          }
      });
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'custom_sticky_header');

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

    @media only screen and (max-width: 767px) { 
    .sticky-top {
        position:fixed!important;
        top:0!important;
        z-index:10000!important;
    }
    }

    Best regards,
    Mike

    #1195235

    Hello Mike,

    thanks for the update. that doesn’t seem to work. I removed the code from (Guenni) in style.css and pasted your code in there. Placed the code in functions.php – the menu is not sticky and moves up.

    #1195416

    Hi,
    I tested this again on the https://kriesi.at/themes/enfold-band/ demo on mobile and the header was sticky.
    Perhaps you have a misplaced bracket, or something similar. We could be of more assistance if we could examine your site.

    Best regards,
    Mike

    #1264487

    Is there a solution yet?
    I have the same question but it doesn’t work for us either…..
    I’ve swiped the functions php clean again. But I really would like to know what the solution is.
    Kind regards

    #1264507

    Hi,

    @Noucky
    thanks for the link to your site I tested the solution above on your site and it seems to work correctly. I tested by injecting the script via the browser.
    This doesn’t seem to be installed on your site right now, do you get an error when you try it?

    Best regards,
    Mike

    #1264519

    Hi MIke,
    Okay but the script in functions.phph and CSS are both there…
    Something must be blocking it then :/

    @Mike
    any ideas where? I just updated Enfold in the hopes that this would help… but no

    • This reply was modified 3 years, 3 months ago by Noucky.
    #1264777

    Hi,

    @noucky
    please include admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    #1265004
    This reply has been marked as private.
    #1265008

    Hi,
    Thanks for the login, but the sticky mobile header seems to be working now, perhaps it was a caching issue? Please clear your browser cache and check.

    Best regards,
    Mike

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