Grow your CSS skills. Land your dream job.

Responsive site – mobile view bug

  • # May 15, 2013 at 5:58 pm

    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.

    # May 16, 2013 at 7:25 am

    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.

    # May 16, 2013 at 4:05 pm

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

    # May 20, 2013 at 9:38 am

    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.

    # May 20, 2013 at 10:02 am

    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.

    # May 20, 2013 at 6:35 pm

    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.

    # May 20, 2013 at 7:41 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".