Codepen HTML + CSS (scss) don't work

[Phonix]

Hey,

I got a question i have this code frome codepen:

https://codepen.io/alphardex/pen/NWxNyXb?fbclid=IwAR0Ji7cqhPaSLHO0CcAJxAcTJ2ReGEfDPrH9TN9GqaVEve9U9pBrHefgL5g

Unfortunately when I upload it to VSC it doesn't work properly. What can I do wrong? I'm a novice programmer and I'm trying to understand this. I upload everything from the HTML codepen to my index.html file in the BODY section, then the scss code to the scss file which is compiled to css and it is imported to the html file. Everything works except the colors - highlighting the burger button on hover and highlighting "HOME" etc.

 

[Antero360]

Hey,

I got a question i have this code frome codepen:

https://codepen.io/alphardex/pen/NWxNyXb?fbclid=IwAR0Ji7cqhPaSLHO0CcAJxAcTJ2ReGEfDPrH9TN9GqaVEve9U9pBrHefgL5g

Unfortunately when I upload it to VSC it doesn't work properly. What can I do wrong? I'm a novice programmer and I'm trying to understand this. I upload everything from the HTML codepen to my index.html file in the BODY section, then the scss code to the scss file which is compiled to css and it is imported to the html file. Everything works except the colors - highlighting the burger button on hover and highlighting "HOME" etc.

Hi there,
Can you post your index.html code? It would be very helpful for those who want to help out to see what you have on your file in order to better help you understand and resolve your issues.

 

[Johna]

In CodePen you dont have to include your CSS using the link tag, and JavaScript using the script tags, but if you're copying that code into VSC, you'll have to include those files.

You could put the CSS in a file called style.css and include it in the head using this code: <link rel="stylesheet" href="style.css">.
And for the JS: <script src="script.js"></script>

 

[LupusInferni]

The problem, after doing the same as you did and seeing it not work, and looking through the code, the variables being used in the css file '
--burger-menu-radius, --primary-color, --primary-color-darker' are never declared and have no meaning. To fix this at the top of the css file add

:root {
    --burger-menu-radius: 4em;
    --primary-color: #3A86B7; /* You can obviously put whatever color you want here */
    --primary-color-darker: #306E97; /* Same here */
}

even though `--burger-menu-radius` is declared later in the file, it's still best practice to put those declarations in ':root'.