Menu Desktop vs.Tablet Width Urgent


#1

I want the menu to be hidden on my desktop site. I want it to show on my tablet/ mobile site though. I tried to get this done earlier and it was working, but then it stopped. I am launching today so if someone could help…


#2

You just need to do again what you did the first time, just make sure you do it in a custom CSS plugin so it doesn’t get overwritten when the theme updates. I’m guessing that’s how you lost your changes the first time.


#3

Vlad, I have it in simple custom CSS. Can you write out exactly what I have to do? it has been a while I can’t remember.


#4

Vlad can you help because originally this is what I had in.

@media only screen and (min-width: 460px) {
.site-header {
display: none;
}
}

But I want to display the media only screen right?

I put this in, but both interfere with the tablet display…
.admin-bar .site-header, .admin-bar .site-header.float-header {
display: none;
}
#masthead.site-header { display: none; important!}


#5

I need an answer on this because it is still not working.
@media only screen and (min-width: 460px) {
.site-header {
display: none;
}
}

But I want to display the media only screen right?

I put this in, but both interfere with the tablet display…
.admin-bar .site-header, .admin-bar .site-header.float-header {
display: none;
}
#masthead.site-header { display: none; important!}


#6

Your code should work but you need to increase 460px to a different value, something like 1200px at least.


#7

Vlad,
It is not sizing that is causing the issue. It is that the code is all or nothing.

I don’t want the menu on the Desktop Version.
I want the menu on the tablet.

If I add it, the code removes the tablet menu.
If I remove the code it shows on the tablet and desktop.

I need a code that will help me to achieve just the tablet menu.


#8

Yes, I understand what you want to do I just tried on your website and it works for sure.

So you add this:


@media only screen and (min-width: 1200px) {
   .site-header {
     display: none;
   }
}

And it will hide the menu bar only for screen sizes bigger than 1200px, which will include desktops. Obviously, if you’re testing on a high end tablet with a large resolution then yeah, it will hide the menu for those also.