Hello y’all, after using @media query in my CSS to make my header responsive, the menu bar is only static with and not sliding even when i applied “left: -100%;”. Check the link below to help me out on this:
The ul is not a general sibling of the checkbox. You would need to find the nav element which is a sibling of the checkbox and then use the descendant selector to target the ul.
i.e.
#check:checked ~ nav ul{
left: 0;
}
(As an aside for smoother transitions you would be better off using transform with translate as it is more performant than manipulating the left property.)
It’s still not working Paul
Have you updated the codepen as you still have the old rule in place?
If I add the rule I gave you (and make the label visible as your icon is not showing in the codepen) and then click it the menu appear as shown in the screenshot below.
I’m using VS code editor and I have updated it and no changes… I only copied the codes to codepen to post from my mobile phone and I have updated it as well… Any idea why it’s not working on vs code. I’m getting fustrated already as I have exhausted all my options of getting this to work.
HI,
Not sure what VS code editor has to do with any of this as all that matters is the code that you have produced (unless you are incorrectly linking to css files etc).
I can’t help you with your version unless you post your version in full so I can see where you are going wrong 
I have forked the codepen you gave me to show that it works with my code addition.
If you have other code not shown in the codepen then that may be pertinent to the problem. Do you perhaps have a live demo somewhere that we can look at?
1 Like
Maybe I’m making an error somewhere on my editor, I’ll definitely check it out… Thanks for massive your help… ( Sorry for asking this question, but what is a live demo and how can I put my code up on a live demo) thanks.
A live demo is where the code is hosted online so that everyone can view. I assumed you were creating a page that could be viewed online so that everyone can see it and would have expected that you had some hosting already set up for your site.
If you don’t have any hosting set up then sites like codepen are useful for straight forward demos but the problem arises when the error is not uploaded or replicated in codepen which makes it hard to debug your local problem.
I suggest that you check you are using the correct css file locally if you have updated it and that you don’t have any cache issues. If that doesn’t solve the problem then open the web developer toolbar in Chrome (or browser of your choice) and look to see if the code you changed is actually being used in the style panel. (The browser devtools are your best friend when debugging problems :))
Just going offline but back tomorrow if you have more questions
2 Likes
Thanks Paul, my menu bar is now working perfectly
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.