Prevent Header from Collapsing

glorygut
Excursionist
23 0 2

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
9747 2227 3060

@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
2 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
Trailblazer
226 13 23

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
23 0 2

@khilan 

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

glorygut
Excursionist
23 0 2

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
23 0 2

@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
280 64 83

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
23 0 2

@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
280 64 83

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]