Change the background color

Hi everyone I want rebuild this animation

13 Replies

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•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•10mo ago

Thanks for your answer I correct all but it not working

Pat66•10mo ago

MarkBoots•10mo ago

you still have the uppercase S in setPropery

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•10mo ago

MarkBoots•10mo ago

yea, because .barre has background-color: var(--bg-color);

Pat66•10mo ago

I remove it is still black

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•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•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•10mo ago

thanks solved

Gaming

Programming

Change the background color