- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Responsive site – mobile view bug
For the mobile view, a nav menu toggles open and closed. When I toggle it closed and enlarge the browser window, the nav is hidden and I cannot get it to be visible unless I refresh the page.
I tried display: block and visibility: visible on the element, but it somehow gets overwritten.
I think something is missing in the main.js doc ready statement.
Codepen link: http://codepen.io/j-nice/full/BrIbA
Any ideas?
Gracias.
Create a different nav element and have the original nav hide on a certain browser width, and have the other nav(mobile one) display when the browser reaches that mobile width. You would have to hide the mobile one when the page loads.
hmmm, I tried that but it wasn’t working out well. I was hoping there was a js solution…
Maybe a little bit hacky but try display: block !important; on the ul (in the 768ish and up stylesheet) or whatever gets hidden, that should overwrite the js when the window is expanded back to non mobile view.
What @michaeljalmond said..while people frown on `!important`, that’s your easiest solution, because `display: hidden` is an inline-style created by the js, so just using `display: block !important` at your media query for large screens will overwrite the inline style.
Here you go. http://codepen.io/Jarolin/pen/FBvpw
Re-size the frame and the desktop version hides, while the mobile one with different styles shows, It should be working for you.
Been swamped with other work, so I haven’t implemented anything yet. But I can’t wait to try out these great fixes. Thank you guys for the awesome info!!!