Change the background color

Hi everyone I want rebuild this animation
13 Replies
Pat66
Pat66•10mo ago
the problem I have is the background how to change the color when I click on the menu burger code JS:
script>
const btn=document.querySelector('.burger');
btn.addEventListener("click", ()=>{
const menu=document.querySelector('.menu');
const content=document.querySelector('.content');
content.classList.add('slide');
menu.classList.add('slideLeft');
btn.style.visibility="hidden";
documment.documentElement.style.SetProperty('--bg-color','#121214;')
})


</script>

script>
const btn=document.querySelector('.burger');
btn.addEventListener("click", ()=>{
const menu=document.querySelector('.menu');
const content=document.querySelector('.content');
content.classList.add('slide');
menu.classList.add('slideLeft');
btn.style.visibility="hidden";
documment.documentElement.style.SetProperty('--bg-color','#121214;')
})


</script>

can I get some idea about what is going wrong ? thanks by advance
MarkBoots
MarkBoots•10mo ago
first of all SetProperty needs to be setProperty (lowercase s) also, remove the semicolon ; from the property value (hex color) and you misspelled document (single m) (lots of errors in 1 single line 😉 ) so it should be document.documentElement.style.setProperty('--bg-color','#121214'); the rest is done within css
Pat66
Pat66•10mo ago
Thanks for your answer I correct all but it not working
Pat66
Pat66•10mo ago
No description
MarkBoots
MarkBoots•10mo ago
you still have the uppercase S in setPropery
Pat66
Pat66•10mo ago
thanks this is the final result https://codepen.io/alpha_66/pen/ExMKeKd but something is going wrong on the div barre the background is black
Pat66
Pat66•10mo ago
No description
MarkBoots
MarkBoots•10mo ago
yea, because .barre has background-color: var(--bg-color);
Pat66
Pat66•10mo ago
I remove it is still black
clevermissfox
clevermissfox•10mo ago
Is the body also black? Give your nav a bg color of white or your body a bg color of white
Pat66
Pat66•10mo ago
the body should be black only when I click on the burger menu but when I click on it the div who have barre class become also black that the probleme look how is it before I click on the burger menu
clevermissfox
clevermissfox•10mo ago
The barre element doesn't have a bg colour, its transparent so its background it whatever the body background is. Set a background-color: #fff; on the .barre (or whatever color you want it to be )
Pat66
Pat66•10mo ago
thanks solved
Want results from more Discord servers?
Add your server