This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Hiding main menu, showing for devices

  • Creator
    Topic
  • #13880
    odyn
    Participant

    I’m trying to use menu widget (much better looking) and hiding the default menu in jumpstart. I managed to hide the menu by using display:none but I had to use !important for it to work.

    Now I’d like to show the default menu just for tablets and mobile devices and would like to know where to start.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #13888
    Jason Bobich
    Keymaster

    In responsive design, we use what are called @media queries to target specific viewport sizes. In your Jump Start’s style.css scroll through to the bottom, and you will see how @media queries are used to target the different viewport sizes that correspond to the general ranges used for tablets and then mobile. This is how you write CSS specifically targeted for these devices.

    #13906
    odyn
    Participant

    I know that but since I’ve used !important for display:none (otherwise it would not work), it will also get overriden in @media.

    #13910
    Jason Bobich
    Keymaster

    I know that but since I’ve used !important for display:none (otherwise it would not work), it will also get overriden in @media.

    Apologies, I’m not quite understanding the issue. — So, you’re trying to just hide the Jump Start menu when it’s above the tablet size, right? Then with your @media queries, you’d just structure it that way. The tablet viewport size cut off Jump Start uses is 979. So, you could possible setup your @media queries to use 980 as a min-width —

    @media (min-width: 980px) {
    	/* Anything for 980 and above here ... */
    }

    Or am I misunderstanding? If I am, can you try to explain in a little more detail what the issue is, what you’re doing, and what problem you’re facing?

    #13923
    odyn
    Participant

    That was exactly what I meant, yes. I just didn’t know min-width existed (although it was already used in original code)
    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.