DEBUT Mobile Menu issue

New Member
5 0 0

Hi, I'm having issues getting this Debut theme mobile menu to work correctly. Any help would be appreciated.

Here is the url for my store https://crazy-prizes.myshopify.com/  

Use the pass crazy

I was looking at other forum posts trying to get the fixed anouncement bar/menu working correctly.

I got them to stay fixed, but when I click on the mobile menu button, the menu's are cut off. I had it working fine, until I enabled the anouncement bar.

Here are my modifications to the 

theme.scss.liquid

body {
  padding-top: 67px;
}
.site-header {
  height: 67px;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background: rgba(255,255,255,.7);
}
@include media-query($medium-up) {
  body {
    padding-top: 81px;
  }
  .site-header {
    height: 81px;
  }
}

.index-section {
    padding-bottom: 30px;
    padding-top: 30px;
}

div#SearchDrawer {
    z-index: 101;
}

.announcement-bar {
  text-align: center;
  position: fixed;
  width: 100%;
}

 

header.liquid

{% if section.settings.message %}
  <style>
    div#PageContainer { padding-top: 44px; }
    .site-header       { top: 44px; }
    .announcement-bar {
      top: 0; 
      z-index:110;
      background-color: {{ section.settings.color_bg }};
    }

    .notification-bar__message {
      color: {{ section.settings.color_text }};
    }

    {% if section.settings.logo != blank %}
      .site-header__logo-image {
        max-width: {{ section.settings.logo_max_width | escape }}px;
      }
    {% endif %}

    {% if section.settings.align_logo == 'left' %}
      .site-header__logo-image {
        margin: 0;
      }
    {% endif %}
  </style>
{% endif %}

 

theme.js

Line 1013

  function openMobileNav() {
    var translateHeaderHeight = cache.$siteHeader.css('position') =='fixed' ? 0:
      cache.$siteHeader.outerHeight() + cache.$siteHeader.offset().top;

 

0 Likes
New Member
5 0 0

When I click the mobile menu button, it cuts off the first menu item and leaves blank space in the bottom.

0 Likes
New Member
5 0 0

If I disable the announcement bar, the mobile menu looks and acts correctly. I would like to continue to use the announcement bar though.

0 Likes
New Member
3 0 0

Did you ever fix this? I'm having the same problem with Debut

0 Likes
New Member
2 0 1

Bump. Same here. I would very much like to keep the announcement bar.

1 Like
Tourist
8 0 1

If you have the annoucement bar activated the mobile menu calculations get messed up on mobile. We had loads of white space above the top menu item and the bottom ones cutoff.

To fix:
Open Assets/theme.js

Find:

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;

 

Replace with:

function cacheSelectors() {
    cache = {
      $pageContainer: $('#PageContainer'),
      $siteHeader: $('.site-header'),
      $announcements: $('.announcement-bar'),
      $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 - cache.$announcements.outerHeight();

 

Then it should work - we added a variable for the annoucement bar and subtracted that from the calculation because it was where the excess height of first menu item was coming from (in our case).

Good luck!

Jonas

1 Like
New Member
18 0 0
  function openMobileNav() {
    
    
    //Added gap adjuster for mobile menu to account for the announcement bar
    var gapAdjust = 0;
    if ($('#qab_bar').length > 0) {
      gapAdjust = $('#qab_bar').height();
    }

    var translateHeaderHeight = cache.$siteHeader.outerHeight() + cache.$siteHeader.offset().top - gapAdjust;

Slightly modified version to account for case when say the announcement bar is disabled.

0 Likes
New Member
2 0 0

Hi,

 

I have the same problem on the mobile version of my website. I just tried to change the code into the one that you gave here but nothing was fixed. Is there any other way to fix this problem?

 

Thank you

0 Likes
New Member
2 0 0

Hi, I tried to change the code to the one you gave but it didn't fix the problem. Is there anything else I could try to fix this problem. Thank you.

0 Likes
New Member
3 0 0

did anyone come up with a solution here?

I'd like to keep my announcement bar and my annoucement bar app (i'd like to have two) but i suspect that's whats interfereing with the dropdown hamburger menu as I cannot get it to work on mobile at all....

Is there a way i can fix this without code as I am not a coder and don't want to accidentally mess any of the code up and create other problems.

 

www.shopvestirsi.com is my site - its fine on desktop but the issue is on mobile

Thanks

0 Likes