Toggling Class doesnt work well

I cant make my toggling class to work at all, i have navigation bar at max width of display from 768px where hamburger menu appears and i want when i click on it to display hidden nav bar from side and then second click hide it and vice versa. Am i missing something? I used function to check if media is at certain max width before click function.

EDIT: Solved the problem ,had to use !important on .active class because of apparent priorities between id’s and classes.
Here’s codepen:

You should really avoid selectors like this

header > #header-upper-section > #upper-header > #upper-header-nav > #upper-nav > ul > li > a:hover

That is way too specific.

Avoid using ids for CSS, use classes instead, and make each selector as flat as possible. Do not “solve” specificity issues using !important use it only when absolutely necessary, like for utility class that you know has to overwrite styles.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.