Added sticky header for Debut Theme but my mobile menu is pushed down, I need a fix!

Solved
Shopify Partner
42 1 2

So basically I follow a very cool guide to have the header on Debut Theme as sticky or fixed, this is the guide. However, if you browse the store on mobile, you'll notice that upon clicking the menu icon, it is displayed a few pixels below of where it should, specifically the gap is the same size as the announcement bar. It doesn't look very nice but I can live with it, the problem is that today I added a few categories to my sub menus, and because of this issue, I can't scroll my menu all the way down to click the last sub category. I think it is a problem with js, does anyone has a fix for this? I do feel confortable tweaking the code myself.

The happens only in mobile, for desktop I'm using a third party menu so I don't have that issue at all.

0 Likes

Success.

Astronaut
1091 150 274

In your theme.js file in your assets folder there's a openMobileNav function that was previously adding your site headers top position. If you remove that, it should fix your issue. Backup your theme incase anything goes wrong, then look for these lines:

 

  function openMobileNav() {
    var translateHeaderHeight =
      cache.$siteHeader.outerHeight() + cache.$siteHeader.position().top;

And remove the + cache.$siteHeader.position().top

 

  function openMobileNav() {
    var translateHeaderHeight =
      cache.$siteHeader.outerHeight();

Should fix your issue

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Shopify Partner
42 1 2

Thanks a lot for your reply, I found out that that function was all commented, I removed it from the comment and did what you mentioned but my hero slider disappear and the menu didn't work, I'm not sure what's the issue here. This is how I have that part of the theme.js file:

/*function cacheSelectors() {
    cache = {
      $pageContainer: $('#PageContainer'),
      $siteHeader: $('.site-header'),
      $mobileNavToggle: $('.js-mobile-nav-toggle'),
      $mobileNavContainer: $('.mobile-nav-wrapper'),
      $mobileNav: $('#MobileNav'),
      $sectionHeader: $('#shopify-section-header'),
      $subNavToggleBtn: $('.' + classes.subNavToggleBtn)
    };
  }

  function openMobileNav() {
    var translateHeaderHeight =
      cache.$siteHeader.outerHeight() + cache.$siteHeader.position().top;*/

If I'm not mistaken, this was commented to make the mobile menu work again because it got messed up when I I installed Smart Menu by qikify. 

0 Likes
Astronaut
1091 150 274

It was running on your website when I checked it yesterday. I went into your theme.js file and enabled local overrides so that I could delete it, save it on my side, and rerun your site with the new javascript and it fixed the issue. There may be another instance of it somewhere? 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Shopify Partner
42 1 2

You were right, they were to more instances, I changed both and it works, it doesn't jump down anymore, but I can't scroll all the way down to the end of the menu. It's like I can scroll the whole page behind the menu but the menu, leaving my last sub category un-clickable. How could I fix this? I appreciate your help very much!

0 Likes
Astronaut
1091 150 274

You can go to your theme.scss and look for mobile-nav__dropdown and add the following styles:

 

.mobile-nav__dropdown {
    height: 100vh;
    padding-bottom: 100px;
    overflow-y: auto;
}

This will give you a full screen menu and will be scrollable for anything extending beyond the screen

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Shopify Partner
42 1 2

Thank you! this works really good! The menu with most sub-categories still leaves the last one un-clickable I don't know why but I might as well merge a couple of subcategories so I don't have such a huge drop-down. Thanks, I'll mark your first answer as a solution.

0 Likes
Astronaut
1091 150 274

Odd, I can click it. But whatever works for you, glad it helped. Thanks for the likes and accepting the solution.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes