I am sorry if this exists, I have looked for it but perhaps I am not looking for the correct thing.

So in this simple example, I have a navigation that changes using @media query's, on the last query I hide a div called "nav-wrap" and chage it's look so that it is a little more mobile friendly, if you just resize the window down to mobile size and back to desktop size the navigation hides and re-appears just fine, however, the little red box at the top is going to be the mobile navigation access and uses a simple javascript function, when in the smallest mobile size and the "nam-wrap" is set to display: none, you can click this red button to show the menu and also hide it again with another click, if you press the red button to show the menu and then again to hide it, when I resize the window back to a desktop size, the navigation does not re-appear.

Please please any help here would be great as I have looked and I must be looking for the worng words as I have not found a solution.

Thank you all!! :)

Code Pen:

Even though display: block; is used, it gets overridden by the inline-style tag.

inline styles override internal CSS, and internal CSS overrides external CSS files, and external CSS files override browser defaults.

To solve this, I would recommend doing what Ramon de Vries said in their comment.

CodePudding user response：

Use this code to your requirement will be fulfilled. Put this code into your style.css file and then run it.

@media only screen and (min-width: 550px) {
    .nav-wrap {
        display: block !important;
    }
}