Docs

[mrsnooch]

Hi,

Could you please confirm the CSS I need to hide the topbar from tablets?
I have the code in to hide it from mobiles and it works perfectly, but just not sure how to adjust it to include tablets too?
My code is

  /*Hides topbar on mobile*/
@media screen and (max-width:  600px) {
      .x-topbar {
        display: none;
         }
  }

I would like it to show on landscape tablet only – so, hide from portrait.

Many thanks
Mark

[Darshana]

Hi Mark,

Try updating your code as follows.

/*Hide topbar on mobile*/
@media screen and (max-width:  979px) {
  .x-topbar {
    display: none;
  }
}

Hope that helps.

[mrsnooch]

Hi,

This doesn’t seem to have changed anything, the top bar is still visible.

Thanks
M

[Darshana]

Hi Mark,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks!

[mrsnooch]

Hi Darshana,

Sorry I thought I included this previously; bigrockdesigns.badwolfproductions.co.uk/

I’ll include a login below incase you want it.

Thanks
M

[mrsnooch]

This reply has been marked as private.

[mrsnooch]

Also I have noticed there is a bit of a conflict with an overlapping logo but you can probably ignore that for now.

[Lely]

Hello There,

Please try this custom CSS instead:

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  .x-topbar {
    display: none;
  }
}

Hope this helps.

[mrsnooch]

Hi Lely,

Still not luck I’m afraid.

I haven’t tried it on a landscape tablet yet – I’m just resizing a Chrome window on my macbook – but it’s still appearing – see attached image.

Note – I thought your code was working on mobile, and not tablet, however I’ve discovered that I had another bit of code in that was dealing with the mobile. Once I remove that code, your code doesn’t work at all, for mobile or tablet, and the top bar displays on the site again. The code I was using, and that worked, was

/*Hides topbar on mobile*/
@media screen and (max-width: 600px) {    
  .x-topbar {         display: none;     } }

How can this be amended to include tablets?

Thanks
Mark

[Thai]

Hi There,

Our code didn’t work because you forgot to close the curly bracket(}) in your custom CSS.

Please find this CSS:

@media screen and (max-width: 600px) { 
.x-navbar.x-navbar-fixed-top{
	top:0px;
}

And replace to this:

@media screen and (max-width: 600px) { 
.x-navbar.x-navbar-fixed-top{
	top:0px;
}
}

After that add the following CSS:

@media screen and (max-width:  979px) {
  .x-topbar {
    display: none;
  }
}

Hope it helps 🙂

[mrsnooch]

Hi Thai,

You’re absolutely right, infact I was missing two closing curly brackets which may have had an overall effect. So thank you, my mistake, it’s working great now!

I wonder if I can ask a follow up. I have the + in the top right feature enabled, how can I disable this on mobiles and tablets also? I can see that although it isn’t visible at first, if i pull down on my mobile/tablet, it is visible top right, and I believe is having a knock on effect as by doing this it also add an extra portion of white space below the logo?

Thanks
Mark

[Joao]

Hi Mark,

Please add the following code to Appereance > Customizer > Custom CSS

@media(max-width: 969px) {
.x-widgetbar {
display: none;
}
}

Hope it helps

Joao

[mrsnooch]

Hi Joao,

This didn’t seem to have any effect, if I pull down the page I can still see the + underneath, and then by doing so I create extra white space under the mobile menu?

Thanks
Mark

[Thai]

Hi Mark,

Please update the previous CSS to this:

@media (max-width: 979px){
    .x-btn-widgetbar {
        display: none;
    }
}

Hope it helps 🙂

[Author]

Posts