Sticky mobile menu doesn't scroll

HI Kharis

So I’m just finishing off this website (still!): https://www.thurstanhoskin.co.uk/

I have used quite a collection of Custom CSS from various topics here to make the mobile version menu sticky and make the site logo disappear when you scroll down the page.

BUT what doesn’t work well is the menu when viewed on a mobile device in Landscape rotation (less than 1024px wide, say 400px tall) - the screen isn’t tall enough to show the whole menu and when you scroll down it’s the actual page behind the menu which scrolls, not the menu so you don’t get to see the last of the menu items. I hope that makes sense.

Can you help?

Many thanks

Nik.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      #masthead.site-header.fixed,
      #masthead.site-header.float-header {
        position: static !important;
      }
    }

Regards,
Kharis

HI Kharis

Thank you!

If I put your code in front of my current Customized CSS code that makes the mobile menu sticky and makes the logo / contact + social bars disappear on scroll down, there is no change to the mobile menu - I still cannot scroll down the menu to see the final menu options.

If I put your code at the end of my code section then the entire header including contact bar, social bar, logo and menu button disappear on scroll down, which isn’t what I want to happen if possible.

This is my additional CSS that I currently have to make the mobile menu sticky and makes the logo / contact + social bars disappear on scroll down so you’re just left with the mobile menu button sticky. I have cobbled this together from various posts on this forum so it’s probably not the optimum!

/*make mobile menu sticky */

@media only screen and (max-width: 1024px) {

#masthead {margin-top: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;}

.header-contact.clearfix {padding-top: 5px;
padding-bottom: 5px;}

.header-image {display: none;}
.site-header.float-header {
padding: 20px 0;
}
.site-logo {
max-height: 60px; margin-top: 10px;
margin-bottom: 5px;
}
.sydney-hero-area {
margin-top: -16px;
}

.site-logo {

display: none;
}

.btn-menu {
margin-top: -10px !important;
min-height: 40px;
}

.col-md-4.col-sm-8.col-xs-12 {margin-bottom: 5px !important;}

body.home #masthead:not(.float-header) .site-logo {
display: inline;
}

body.home #masthead:not(.float-header) .btn-menu {
margin-top: 15px;
}
}

#masthead.site-header.fixed {
position: fixed !important;
}

@media (max-width: 767px) {
.site-logo {
display: none;
}

.btn-menu {
margin-top: -20px;
min-height: 40px;
}

body.home #masthead:not(.float-header) .site-logo {
display: inline;
}

body.home #masthead:not(.float-header) .btn-menu {
margin-top: 15px;
}
}

Happy to change my code to a better version if you can supply it!

Thanks

Nik.

Hello there,

I am sorry for being imprecise. Please try doing the below jQuery code solution. Firstly you’ve to remove the previous code I suggested.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
  jQuery(function($) {

    $(window).on('load resize', function() {
    
      var hW          = $(window).height();
      var hNavbar     = $('.site-header').outerHeight();
      var visHeight   = hW-hNavbar;
      var menuItems = $('.menu > li').size();
      var mMenuHeight = 45*menuItems;

      if( mMenuHeight > visHeight ){
        $('.mainnav').height(visHeight).addClass('scrollable-mobile-menu');
      }

    });
    
  });
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .scrollable-mobile-menu{
      overflow-y: scroll;
    }

Before running your test on your phone, flush any applied site cache and clear your web browser’s history.

Regards,
Kharis

HI Kharis

That’s great - that works well. Thank you very much - I hope I am finally finished with this website now!

Thanks again.

Nik.

Great Nik!

You’re welcome! Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis