Brooklyn Theme - Header Width Bleeding Over on Right

Store Design
1

I have a client on the Brooklyn theme, and she does not want the hamburger menu to appear at all. I searched for some solutions, and found one that seemed to do the trick:

In your theme.js.liquid file under Assets, search for theme.fitNav = function() then scroll down until you see if (navItemWidth > navWidth) this is the part of the code that says “If the item is greater than the width, then switch it to non-hamburger. If it’s smaller, then switch it to Hamburger”.

Change that to if (navItemWidth < 100)

However, she’s recently added some new menu items, which has pushed the menu outside the width of the rest of the website on the right side. See below:

MetaRVA_0-1633545372007.png
MetaRVA_0-1633545372007.png976×646 370 KB

How can I accomplish the goal of not having the hamburger menu appear while keeping the header menu in line with the rest of the site? I realize that the function is designed to do this as it was, but it clearly wasn’t meeting the goal of no hamburger menu.

So looking for a real fix vs. the workaround I suppose.. any help would be appreciated.

2

@MetaRVA

Without seeing the website we are not able to help finding a solution. In theory you’ll need to add a overflow-x: scroll property to the element being overflown.

Kind regards,
Diego

3

Www.kiskadeeshop.com

4

Thank you.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:
@media (max-width: 1300px){
    .grid__item[role="navigation"]{
    overflow-x: scroll;
}
}

This will prevent the navbar from overflowing, but unfortunately the dropdown will be compromised. It would require some work to have it working properly. It may be needed to hire a developer or seek an alternative to this menu with your client.

Kind regards,
Diego

5

Thanks Diego. That didn’t seem to do anything though. It’s still overflowing to the right.

Like this, right?

@media (max-width: 1300px){ .grid__item[role=“navigation”]{ overflow-x: scroll; } }

6

@MetaRVA

That will work only on screen sizes smaller than 3000px, for all screen sizes you can use the following:

.grid__item[role="navigation"]{
    overflow-x: scroll;
}
7

Hmm.. that didn’t seem to do it either. And the line of code is showing up on mobile at the bottom. Are you sure that’s the right spot to put it in the code?