[moonoi]

I have been trying to remove the topbar from my site. I have done this now on a normal desktop browser by modifying the CSS:

/* =TOP BAR
—————— */

#topbar {
display: none;
height: 0px;
width: 100%;
border-bottom: 1px solid transparent;
position: relative;
z-index: 270;
-webkit-transition:.2s opacity;
transition:.2s opacity;
}

But the topbar still appears on mobiles (eg iphone). I have tried adding a custom css, but this has not worked:

@media (max-width: 650px) { #topbar {display:none;}}

Please can anyone help?

Many thanks in advance

Colin

Website: www.fireballrally.co.uk

[Zed]

Make your CSS more specific:

body #topbar {
    display: none;
}

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[moonoi]

Hi Zed

Many thanks for your recommendation, but that didnt work. The blank topbar still appears for mobile browsing.

Is there anything else you would recommend.

PS I am running the Nirvana theme.

Many thanks

Colin

[Zed]

There is no top bar active on your site so it is normal for the CSS to have no effect.

What you do have on mobile devices is the header area location (for header image, site title), which you’ve left empty. You can disable that completely with:
body #branding, body #bg_image { min-height: 0; }

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Author]

Posts