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

[kerryvarma]

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!

[oscprofessional · Accepted solution]

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;
}
}

[kerryvarma]

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!

[SamKuhn]

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;
}
}

[timrof]

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?