Venture Theme shows mobile menu on desktop

[ten80north]

Hi, 

I am using the venture theme on this site: https://fssportinggoods.com/

When the site is loaded for the first time, it displays the mobile (hamburger) menu even though I am viewing it on a desktop browser. As soon as I refresh the home page or go to another interior page, the full menu shows up. At first, I thought it was because I had too many menu items or the text was too large. However, after playing with both of those settings, I found that it didn't make a difference. 

This issue only shows up when you first visit the site. I can replicate it by clearing my cache and then revisiting the site. The problem shows up on Google Chrome and Firefox but not in IE. This seems like a bug. 

[a_longhurst]

Having the same issue. Would appreciate some help

[a_longhurst]

I'm still having this issue. I have looked on your store and cannot recreate the issue. How did you manage to fix it? Thanks

[ten80north]

I worked with Shopify support on this. They were able to fix it. Here is what they said the did to fix it.....

The code changes I made are at lines 6546 to 6562 in the theme.scss file, and at lines 153 and 207 in the header.liquid file.

Changes to the theme.scss file:

.nav-bar .page-width, .site-header .page-width {
  max-width: 1180px;
}

.nav-bar .hide-grid-item {
  display: none; 
}

.site-nav__link {
  padding: 20px 12px;
}

.site-nav__link:first-of-type {
 padding-left: 20px; 
}

Changes to the header.liquid file:

Line 153:

<div class="grid__item {% if shop.customer_accounts_enabled %}four-fifths{% endif %}" id="SiteNavParent">

Line 207:

<div class="grid__item {% if shop.customer_accounts_enabled %}one-fifth{% else%}hide-grid-item{% endif %} text-right">

[sampan]

@ten80north 

didn't work for me :(

[ten80north]

---

@sampan wrote:

@ten80north 

didn't work for me :(

---

I recommend submitting a ticket or a chat with Shopify support on this. They were very good about getting back to me with a solution. The template may have changed since I worked on it or you may be implementing the code incorrectly. They should be able to help. :)

[sampan]

@ten80north

I chose to 'remove space' for Buttons & Nav Text in Theme Customizer and
that fixed it.

[wyo27]

Happening for me too. Seems odd that one of the main standard themes would not have the functionality of a regular menu without custom coding. Has anyone found a solution? 

[Parasoul]

It's been a year but here's another solution.

in theme.js

You need to comment out this code:

// if (navWidth > parentWidth) {
// $(selectors.siteNav).addClass(hideClass);
// $(selectors.siteNavCompressed).removeClass(hideClass);
// } else {
// $(selectors.siteNav).removeClass(hideClass);
// $(selectors.siteNavCompressed).addClass(hideClass);
// }

 Now your menu should be fully visible below the logo line.

however, you also need to adjust the width of media queries because when resizing the screen the last menu items will go over the site border.

To address that, the simple way I found was to modify the following in the theme.scss

$grid-medium: 1115px; 
$grid-large: 1115px; 

They will trigger the "mobile" view earlier than it was previously set and will look a lot tidier.

You can change those values depending on how much space your menu items take.