Become my coder hero! keep topbar visible in smallscreens

Solved
Excursionist
12 0 1

Could anyone help me ?

site: weediamo.it (weediamo.myshopify.com)

problem : topbar (phone call call to action) disappearing in smallscreen.

i found users havin opposite problem (wanting topbar to disappear in smallscreen  to free precious space (https://community.shopify.com/c/Shopify-Design/Responsive-theme-Remove-topbar/td-p/532471) . 
  i tried to workaround based on that solved issue but couldn't  Find file styles.scss.liquid as said in solution but i couldn't find  it on my code.

only similar thing i found is 
header-css.liquid

tried to paste your suggested code there but just added a blank bar with  

 

@media screen and (max-width: 100px){ .top_bar{ display: none; } }

i am using a themeforest theme called lezada.

thanks in advance to any code-hero willing to help me on a saturday late afternoon!

 

0 Likes
Shopify Partner
8 0 2

Are you missing the text on top bar like attached photo? please let me know.screenshot-weediamo.png

1 Like
Excursionist
12 0 1
Yes i cant visualize exactly that in smallscreens preview, neither live Browning from mobile
0 Likes
Excursionist
12 0 1

@Enamhasan  thanks for tour interest.

 

I will post two images of what i get when mobile browsing my site in both vertical and horizontal mode.

Theme is perfectly responsive but i don't want that feature on that piece of displayed information.

SmartSelect_20191026-182755_Chrome.jpgSmartSelect_20191026-182021_Chrome.jpg

 

0 Likes
Shopify Partner
8 0 2

to hide the topbar in mobile view,

 

Find file plugin.css

Scroll at the very bottom and past the following code there.

 

@media screen and (max-width: 767px){
  .header-top{    display: none;
  }
}

------------------------------------------------------------------------------------------------------------------------------------

 Need more help? Feel free to send me a direct message or drop an email to enamhasan@gmail.com

1 Like
Excursionist
12 0 1

the opposite, i want that topbar to be allways on! No matter the screensize

0 Likes
Excursionist
12 0 1

Still looking for a soluzione to keep that topbar showing in ALL screensizes

0 Likes

Success.

Excursionist
16 5 6

Hi Weediamo,

You need to use the following code:

.order-online-text {
  display: block !important;
}

What the above does it forcing the element to be displayed despite any other classes, on any screen. At the moment there's a "d-none" class applied to this item, which hides it on mobile devices.

Be aware that the element might have been hidden for a reason, as potentially it could look slighltly different on small screens. You would need to test it on your shop though.

Thanks,
Lukasz

1 Like
Excursionist
12 0 1
Thanks Lukasz .

Where exactly shall i paste that code?

0 Likes

Success.

Excursionist
16 5 6

In your theme code editor you should have a file named "theme.scss". Please paste the code at the very bottom of the file.
If you can't find that file, please post a list of all your .scss files in "Assets" folder located on the sidebar of theme editor.

Thanks,

Lukasz

1 Like