• Resolved boppar

    (@boppar)


    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)

    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)

    @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)

    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.