How can I stop my website header from collapsing?

[glorygut]

Hi! 

My site is https://jimmyscannabis.ca

As you can see my navigation/header collapses to a sidebar on the left due to the number of menu items I have. How do I prevent this from happening? Because there is definitely space!

Any help is greatly appreciated! Thanks.

[dmwwebartisan]

@glorygut 

Please share screenshot what do you want !

Thanks!

[glorygut]

Here is a screenshot. Typically my menus items are all displayed, but since I added a new one, they have automatically collapsed to the left on desktop. I believe I need to change the nav margins, but I am unsure how (I want them to stay collapsed on mobile, just not desktop). 

[glorygut]

@dmwwebartisan 

Here is a screenshot. Typically my menus items are all displayed, but since I added a new one, they have automatically collapsed to the left on desktop. I believe I need to change the nav margins, but I am unsure how (I want them to stay collapsed on mobile, just not desktop). 

[OpenThinking]

Hi there,
Jack from OpenThinking here!

Your problem is most likely because you've a sub-menu under "About us" try moving "Locations" outside "About us" and see if that helps you.

let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

[glorygut]

@OpenThinking 

Hey Jack, thanks for getting back to me.

I believe the issue is actually the opposite (since placing locations outside the subheader would actually further reduce the space in my header, again, forcing it to collapse). This is a screenshot of how the site typically looks (and how I'd like it to look), but as soon as I add another page to my navigation it collapses into a hamburger because it takes up too much space. There is a lot of white space to the left of "About Us" that could be utilized, in addition, the whole header margins could be made wider if necessary too. 

[OpenThinking]

I see. Try with this

• Find the file that hosts your <header> (usually located inside "/sections/" and named "head" or "header")
• Locate the following code inside the file:

<div class="grid__item large--one-third medium-down--one-half">

• replace it with: 

<div class="grid__item one-fifth medium-down--one-half">

• if that still not enough try with this:

<div class="grid__item one-sixth medium-down--one-half">

[glorygut]

@OpenThinking 

I ended up using "two-tenths" to get optimal spacing next to the logo, but something is still forcing it to collapse. The only reason I know it's partially working correctly is because when I preview the site, I can see the full navigation displayed correctly for a split second before it collapses. 

[OpenThinking]

There's some JavaScript involved then. You'll need to find out the JS and remove it, but without access to the theme code I can't really help you.

cheers

[THOMAS646]

Hello there how are you doing I just saw your request I'm a Shopify developer I can help you resolved that as a Shopify professional we can talk much better in other for me to guild you through by inbox me on WhatsApp +234 7037535240

[khilan]

hey @glorygut 

please put this code in timber.css

.site-nav, .site-nav--mobile{
marign-left:-95px;
}

thank you so much.

khilan.

[glorygut]

@khilan 

Thanks for your reply! Unfortunately, that doesn't seem to affect my navigation layout.

[glorygut]

https://community.shopify.com/c/shopify-design/how-to-fix-hamburger-menu-in-brooklyn-theme-for-big-s...

The solution is here for anyone looking 🙂