Can anyone help me figure out why my dropdown navbar isn’t working on this page? pixel clubs - katrina evans art
Using the browser dev tools, I don’t see any event on button.dropbtn except for the click event from bsky-embed.es.js that is on everything.
So maybe you forgot to attach an event to the button.
I honestly tried a bunch of different codes, one I used before on an old site but doesn’t work here. How do I attach an event to the button? XD
It would help if you could share a link to the approach you’re trying to follow.
In jquery it could be as simple as
$( ".dropbtn" ).on( "click", () => $( ".dropdown-content" ).toggle())
When I hear drop-down I think of something more like this: https://getbootstrap.com/docs/4.0/components/dropdowns/#examples
Yeah I mean like an expanding navbar? So a submenu I guess? I tried this How To Create a Subnavigation Menu
That approach to an expanding navbar doesn’t use any buttons or JS events. It’s setting display:none on the submenus so they start hidden and then display:block with a :hover selector.
i think i see one of your troubles!
you’ve copy-pasted the CSS for the dropdown at the end of your CSS file, inside of some styling for mobile.
this line
@media only screen and (max-width: 600px) {
means “use these css instructions only if the screen is 600px wide or smaller” ! so all CSS inside those curly brackets is only going to happen on small screens. there’s no closing bracket for this rule, so everything at the bottom of the CSS file is only applying to the page when viewed in a small window.
if you resize your browser window to 600px you can see the dropdown looking more like it’s supposed to!
you’ll want to add a closing bracket at the end of the mobile styling, (that’s this guy 
} ) or just move the dropdown CSS to a differnt spot in the file.
it looks like you’re combining premade codes from a couple of different sources in the html and css, so it might help to add some comments to yourself in the file so you can keep track of the code chunks better! just separating them out with a /* start of w3schools code! */ and /* end of w3schools code! */ would be helpful i think.
missing brackets and semicolons are often the culprit when things aren’t working properly, happens to me all the time!