Narrative theme - The menu exit button doesn't work

Solved
berlucchi
New Member
5 0 0

When I click the exit menu button nothing happens. I am using Narrative Theme. I tried changing the css z-index like some of the suggestions but nothing works. My store: https://berlucchi.myshopify.com/

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2298 413 538

This is an accepted solution.

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body>  tag:

<script>
function closeMenu(){
var close = document.querySelector(`.site-header__navigation.btn`);
if(!close)return;
close.addEventListener('click', function(){
document.querySelector(`body`).classList.toggle(`navigation-open`);
});
}

closeMenu();
</script>




Please let me know whether it works.

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 9 (9)
diego_ezfy
Shopify Partner
2298 413 538

Hello,

What is the password for your store, please? It's password locked.

Thanks

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
berlucchi
New Member
5 0 0
Hi, my password is : tiewha
diego_ezfy
Shopify Partner
2298 413 538

This is an accepted solution.

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body>  tag:

<script>
function closeMenu(){
var close = document.querySelector(`.site-header__navigation.btn`);
if(!close)return;
close.addEventListener('click', function(){
document.querySelector(`body`).classList.toggle(`navigation-open`);
});
}

closeMenu();
</script>




Please let me know whether it works.

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

berlucchi
New Member
5 0 0
Hi Diego,

I just added :
.navigation__entrance-animation {
opacity: 1;
}

since i saw that the opacity of those items was set to 0 .
The rest works great!

Thanks again.
diego_ezfy
Shopify Partner
2298 413 538

I'm glad to hear. Wishing you a great week

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
SANIS
New Member
2 0 0

Hi! I used the same instuctions of you but i didn't know where to add this code : .navigation__entrance-animation {
opacity: 1;
}; 

please can you help me. Thank youu ! 

berlucchi
New Member
5 0 0
Hi, under assets folder you can find a theme.scss.liquid file .. just paste
it on the bottom of that file
berlucchi
New Member
5 0 0

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Under Assets folder find theme.scss.liquid and paste the code on the bottom of that file

Daaniel
Shopify Partner
15 0 4

Also having the same problem with Narrative menu bar. It won't close. Script or other solutions in this discussions are not fixing it.