How to hide a top bar on mobile and tablet?
-
I have added a top bar to my site. The problem is that I only want it to show on desktop, not tablet or mobile.
How can I hide it on mobile and tablet?
Site: https://hangmattor.se/
I’ve usedCSS: #topbar { background-color: #5B5B5B; height: 18px; line-height: 16px; } #topbar p { color: #fff; } Code snippet: /** * Adds a top bar to Storefront, before the header. */ function storefront_add_topbar() { ?> <div id="topbar"> <div class="col-full"> <p><span class="space">? H?NGMATTOR och H?NGSTOLAR</span><span class="space">? SNABBA LEVERANSER</span><span class="space">? FRI FRAKT!</span><span class="space">? 040-917 817</span><span class="space">? <a href="https://hangmattor.se/kontakt/">KONTAKT</a></span><span class="space">? <a href="https://hangmattor.se/mitt-konto/">MITT KONTO</a></span></p> </div> </div> <?php } add_action( 'storefront_before_header', 'storefront_add_topbar' );
Viewing 3 replies - 1 through 3 (of 3 total)
-
Hi @boppar – you need to target these devices within your CSS using @media: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488 (those are some standard sizes)
Based on what you already have, I would try adding this to what you included:
@media (max-width: 1024px) { #topbar { display: none!important; } #topbar p { display: none!important; } }This should hide the topbar you’ve created for any devices with a screen smaller than 1024px. It’s almost impossible to ensure this works for only phones and tablets, but I’d feel pretty confident in that working.
Viewing 3 replies - 1 through 3 (of 3 total)
- The topic ‘How to hide a top bar on mobile and tablet?’ is closed to new replies.
