CODEWITHSUNDEEP
javascriptcssresponsive-design
Attila Naghi
Attila Naghi

Reputation: 2686

Overriding css elements on responsive issue

I have a mobile menu on responsive, which use a javascript to show all of the elements from the menu. It puts on my <ul> a css code display:block on the element. So on a specific screen in my case:

@media only screen and (max-width:980px){
     ul {display:none}
}

If I want to override it with a display none, it doesn't work because the display:block it is inline. I tried to change it like this :

.myclass .myclass2 ul {display:none}

but still doesn't work. I do not want to touch the javascript. How can I override it ?

Upvotes: 0

Views: 125

Answers (1)

mvpasarel
mvpasarel

Reputation: 785

If you have an inline style as you said display:block the single why to override this from within a CSS file is by using !important. But that wont work in your case if you want to show the menu at a click of a button.

I would use 2 classes for this, one to show the menu and one to hide it, no inline CSS and no !important. On window.onload/document.ready event I would take the width of the document and if its greater than 980px I would add the hidden class to hide the menu, when user clicks the menu button I toggle the show class. The same thing for window.resize event.

Upvotes: 1

Related Questions