Toggle button Debut theme

Solved
DCorsica
Excursionist
12 0 3

Good morning,

I am using Debut theme and trying to increase the size of the drop down menu (when click on the hamburger toggle) when my website is on mobile mode.

I have tried to add

div#page-container { transform: translate3d(0px, 289px, 0px); }

Or

.site-header .site-nav__item { transform: translate3d(0px, 289px, 0px); }

In the theme.css in Assets section but it does not work.

Do you have any idea ?

Thank you in advance.

 

ps: I would like it to look as on the screenshot

 

Screenshot 2021-03-02 at 09.22.29.png

Accepted Solution (1)

Accepted Solutions
ZestardTech
Shopify Expert
3512 580 805

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-index div#shopify-section-header .site-header nav.mobile-nav-wrapper li.mobile-nav__item .mobile-nav__link span.mobile-nav__label {
color: black !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 10 (10)
ZestardTech
Shopify Expert
3512 580 805

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
aeriondigital
Tourist
6 0 5

url: www.dobblecorsica.fr

pw: dobblecorsica

Sorry for the mistake 

ZestardTech
Shopify Expert
3512 580 805

please share me correct password.

Screenshot :- https://prnt.sc/10b6up1

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
aeriondigital
Tourist
6 0 5

url: www.dobblecorsica.fr

pw: dobblecorsica

Sorry for the mistake 

DCorsica
Excursionist
12 0 3

Did you have a look yet ?

ZestardTech
Shopify Expert
3512 580 805

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-header nav.mobile-nav-wrapper {
position: absolute;
z-index: 99;
background: white;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
DCorsica
Excursionist
12 0 3

Thank you so much it works. 

 

However is there a way to make the writing black only once the menu is open? (it is a bit too light like that)Screenshot 2021-03-03 at 08.36.59.png

 

 

ZestardTech
Shopify Expert
3512 580 805

This is an accepted solution.

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-index div#shopify-section-header .site-header nav.mobile-nav-wrapper li.mobile-nav__item .mobile-nav__link span.mobile-nav__label {
color: black !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
DCorsica
Excursionist
12 0 3

Thank you so much for your help and solution ! It worked

ZestardTech
Shopify Expert
3512 580 805

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing