How to hide a top bar on mobile and tablet?

  • Resolved boppar

    (@boppar)


    4 years, 11 months ago

    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?

    Storefront. Site: https://ibb.co/Zf94Pdy

    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' );
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator t-p

    (@t-p)

    4 years, 11 months ago

    I recommend asking at your theme’s dedicated support so the theme’s developers and support community can help you with this.

    Thread Starter boppar

    (@boppar)

    4 years, 11 months ago

    @t-p
    Thanks for your advice.

    I found the codes on a page that was not related to Storefront, but to WP in general. I assumed to hide the top bar wouldn’t be theme related.

    There seems to be more bright minds in this forum, than in the Storefront support. That’s why I was hoping for support here.

    Thread Starter boppar

    (@boppar)

    4 years, 11 months ago

    In case somebody has the same problem.
    I got the solution from a kind soul in Storefront thread.

    Solution:

    @media (max-width: 1024px) {
   #topbar {
      display: none!important;
   }
   #topbar p {
      display: none!important;
   }
}
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.