Venture Theme shows mobile menu on desktop

ten80north
Tourist
4 0 1

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. 

Replies 9 (9)
a_longhurst
Tourist
3 0 2

Having the same issue. Would appreciate some help

a_longhurst
Tourist
3 0 2

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
Tourist
4 0 1

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
Shopify Partner
8 0 1

@ten80north 

 

didn't work for me :(

ten80north
Tourist
4 0 1

@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
Shopify Partner
8 0 1
@ten80north

I chose to 'remove space' for Buttons & Nav Text in Theme Customizer and
that fixed it.
wyo27
Excursionist
15 0 11

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
New Member
2 1 2

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.

 

Raye
Tourist
7 0 1

Hi. I tried your code and it worked perfectly for me. However, there is a slight issue. My Dropdown on that menu is pretty much non existent now. Hovering over and clicking my menu items won't make my sub items appear at all. Did you have this same issue as well? Thanks!