Why doesn't my mobile menu open in the debut theme?

Store Design
1

Hi!
We are using the Shopify debut theme with a font adaption (within the CSS code). Unfortunately, the main menu doesn’t open in the mobile version anymore. Nevertheless, we don’t know if its because of the font or another plugin. Can anyone advise, please?

URL:

www.thecompanyberlin.com

Thanks

2

@thecompany

Exchange your theme.js file Code
with this js code
https://github.com/abpalancajr/Debut/blob/master/assets/theme.js

OR try this

@font-face {

  font-family: "NEXA Bold";

  src: url('{{ "Nexa-Bold.eot" | asset_url }}');

  src: url('{{ "Nexa-Bold.eot" | asset_url }} ?#iefix') format("embedded-opentype"),

       url('{{ "Nexa-Bold.woff" | asset_url }}') format("woff"),

       url('{{ "Nexa-Bold.woff2" | asset_url }}') format("woff2"),

       url('{{ "Nexa-Bold.ttf" | asset_url }}') format("truetype");

}

yourcssselectorhere { font-family: "Nexa-Bold.woff2"!important; }

Remove this code from theme.js file

3

Hey @thecompany

And thanks @Zworthkey for that code. Pro-tip: I would try it in a backup theme copy first before implementing it in the live theme.

4

@thecompany

Remove the following code from your assets /theme.js file.

@font-face {

  font-family: "NEXA Bold";

  src: url('{{ "Nexa-Bold.eot" | asset_url }}');

  src: url('{{ "Nexa-Bold.eot" | asset_url }} ?#iefix') format("embedded-opentype"),

       url('{{ "Nexa-Bold.woff" | asset_url }}') format("woff"),

       url('{{ "Nexa-Bold.woff2" | asset_url }}') format("woff2"),

       url('{{ "Nexa-Bold.ttf" | asset_url }}') format("truetype");

}

yourcssselectorhere { font-family: "Nexa-Bold.woff2"!important; }

add this code to your assets/theme.css or assets/theme.scss.liquid bottom of the file .

@font-face {

  font-family: "NEXA Bold";

  src: url('{{ "Nexa-Bold.eot" | asset_url }}');

  src: url('{{ "Nexa-Bold.eot" | asset_url }} ?#iefix') format("embedded-opentype"),

       url('{{ "Nexa-Bold.woff" | asset_url }}') format("woff"),

       url('{{ "Nexa-Bold.woff2" | asset_url }}') format("woff2"),

       url('{{ "Nexa-Bold.ttf" | asset_url }}') format("truetype");

}

yourcssselectorhere { font-family: "Nexa-Bold.woff2"!important; }

Thanks!

5

@thecompany

@font-face {

  font-family: "NEXA Bold";

  src: url('{{ "Nexa-Bold.eot" | asset_url }}');

  src: url('{{ "Nexa-Bold.eot" | asset_url }} ?#iefix') format("embedded-opentype"),

       url('{{ "Nexa-Bold.woff" | asset_url }}') format("woff"),

       url('{{ "Nexa-Bold.woff2" | asset_url }}') format("woff2"),

       url('{{ "Nexa-Bold.ttf" | asset_url }}') format("truetype");

}

yourcssselectorhere { font-family: "Nexa-Bold.woff2"!important; }

remove this code from the theme.js file.
And It will work properly.
6

You guys all are amazing! Thanks to everyone who replied! It works fine now!

7

@thecompany

If helpful then please Like and Accept Solution

8

@thecompany
kindly Like our Solution if helpful .

let me help other also.