Sticky Menu on Mobile not sticky - Support | Kriesi.at

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

Author

Posts
March 5, 2020 at 7:18 pm #1190587

nomorebeans
Participant

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?

March 5, 2020 at 9:25 pm #1190659

Victoria
Inactive Moderator

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

March 6, 2020 at 5:15 am #1190731
nomorebeans
Participant
short answer, nope :)
site is not public yet.

but you can look at your demo site – problem is there too
- This reply was modified 4 years, 1 month ago by nomorebeans.
March 7, 2020 at 2:25 pm #1191115

Mike
Moderator

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:

and this is at 767px and below where it changes to the burger menu:

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

March 7, 2020 at 6:39 pm #1191145
Guenni007
Participant
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;
  }
}
```
March 7, 2020 at 7:18 pm #1191149

Guenni007
Participant

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 ?

March 7, 2020 at 7:52 pm #1191152
Guenni007
Participant
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
March 7, 2020 at 10:48 pm #1191177

Mike
Moderator

Hi,

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

Best regards,
Mike

March 8, 2020 at 8:54 am #1191227

Guenni007
Participant

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.

March 8, 2020 at 1:36 pm #1191255

Mike
Moderator

Hi,
Oh, I see, thanks.

Best regards,
Mike

March 8, 2020 at 7:23 pm #1191296

nomorebeans
Participant

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

March 8, 2020 at 10:41 pm #1191313

Mike
Moderator

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

March 10, 2020 at 12:13 am #1191664
nomorebeans
Participant
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 4 years, 1 month ago by nomorebeans.
March 11, 2020 at 12:56 pm #1192242

Mike
Moderator

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

Best regards,
Mike

March 13, 2020 at 8:34 am #1192840

nomorebeans
Participant

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.

March 14, 2020 at 4:13 pm #1193104
Mike
Moderator
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
March 22, 2020 at 2:43 pm #1195235

nomorebeans
Participant

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.

March 23, 2020 at 11:20 am #1195416

Mike
Moderator

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

December 2, 2020 at 12:47 pm #1264487

Noucky
Participant

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

December 2, 2020 at 2:40 pm #1264507

Mike
Moderator

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

December 2, 2020 at 4:08 pm #1264519
Noucky
Participant
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, 4 months ago by Noucky.
December 3, 2020 at 2:21 pm #1264777

Mike
Moderator

Hi,

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

Best regards,
Mike

December 4, 2020 at 1:47 pm #1265004

Noucky
Participant

This reply has been marked as private.

December 4, 2020 at 1:59 pm #1265008

Mike
Moderator

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
Author

Posts

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

You must be logged in to reply to this topic.