How to hide a top bar on mobile and tablet?

Replies: 0

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 used

CSS:

#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' );

• This topic was modified 13 minutes ago by boppar.
• This topic was modified 13 minutes ago by boppar.
• This topic was modified 12 minutes ago by boppar.