Out of the Sandbox Flex Theme - how to keep/show Top Bar in mobile view

Technical Q&A
1

Hello! Just wondering what the flexibility is with being able to show the Top bar (the blue bar with social icons and address text) in mobile for this Flex template, as by default it is switched off and only ever appears in desktop view. And, if possible to show, hoping to hide the address text and just show the social icons? It seems a fairly basic thing to do, but having some difficulties. Site is https://kaartist.com/ and previous developer managed to get it working for the Flex Bloom template. preview link here: https://s6gat0fc1kobrt0x-3369801.shopifypreview.com

Thanks in advance!

2

Hello kerryvarma,

Add this css at bottom of
Online Store-> Themes → Edit code->Assets->styles.scss.css

@media only screen and (max-width: 798px)
{
.top-bar {
 display: block!important; 
}
p.navbar-item.is-flex.is-flex-wrap {
    display: none;
}
ul.social-icons.is-flex.is-flex-wrap {
    padding-top: 5%!important;
}
}
2 Likes
3

Hi OSC Professionals

I really appreciate you reaching out and helping. The solution worked. I’ve taken a note of your website and services, and will definitely keep you in mind moving forwards for future work.

Thanks again!

4

If I wanted to Center the text in the top bar for mobile, what code would need to be added to:

@media only screen and (max-width: 798px)
{
.top-bar { display: block!important;
}p.navbar-item.is-flex.is-flex-wrap { display: none;
}ul.social-icons.is-flex.is-flex-wrap { padding-top: 5%!important;
}
}

5

I have added this code to my styles sheet, while the top bar now shows on mobile, the text/content does not show up. Is there an additional line of code I can add to ensure the message in the top bar shows up on mobile?

1 Like
6

Hi, thank you very much for this piece of code. I added this piece of code to my website. I have now the topbar on mobile version: the text, the serach and the cart. But, so, the search and the cart repeat itself with below. How can I just add the text from the topbar without the cart and without the search?

Thank you very much,

Charlotte

7

Hi Sam, did you find a way to do that? Thanks!!