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

Solved
kerryvarma
Excursionist
24 4 6

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!

0 Likes

This is an accepted solution.

Hello 

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;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
kerryvarma
Excursionist
24 4 6

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!

0 Likes
SamKuhn
Tourist
8 1 2

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

0 Likes
timrof
New Member
1 0 0

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?

0 Likes