Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Responsive site – mobile view bug

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #44807
    Janice
    Participant

    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.

    #135276
    Anonymous
    Inactive

    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.

    #135334
    Janice
    Participant

    hmmm, I tried that but it wasn’t working out well. I was hoping there was a js solution…

    #135700
    michaeljalmond
    Participant

    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.

    #135706
    ChrisP
    Participant

    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.

    #135776
    Anonymous
    Inactive

    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.

    #135785
    Janice
    Participant

    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!!!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.