FROM CACHE - en_header

Prevent Header from Collapsing

glorygut
Excursionist
35 0 7

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.

Replies 12 (12)
dmwwebartisan
Shopify Partner
10767 2345 3342

@glorygut 

Please share screenshot what do you want !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
THOMAS646
New Member
9 0 0

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
Shopify Partner
271 15 26

hey @glorygut 

please put this code in timber.css

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

thank you so much.

khilan.

Shopify Expert | Skype: khilan.mendapara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on khilan.mendapara1995@gmail.com regarding any help
glorygut
Excursionist
35 0 7

@khilan 

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

glorygut
Excursionist
35 0 7

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). 

Screen Shot 2021-11-23 at 10.19.20 AM.png

glorygut
Excursionist
35 0 7

@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). 

 

Screen Shot 2021-11-23 at 10.19.20 AM.png

OpenThinking
Shopify Partner
311 76 107

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.

 

 

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
glorygut
Excursionist
35 0 7

@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. 

 

Screen Shot 2021-11-23 at 6.10.12 PM.png

 

 

OpenThinking
Shopify Partner
311 76 107

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">

 

 

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
glorygut
Excursionist
35 0 7

@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
Shopify Partner
311 76 107

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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
glorygut
Excursionist
35 0 7