Remove Promo Bar section from mobile only devices

Highlighted
New Member
2 0 0

Hello 

I would like to remove the promotions bar from appearing on mobile devices only,  Could someone please help me with the code for this.

 

The following code is under my Header.liquid

{% if section.settings.promo_bar_enable %}
<div id="NotificationPromo" class="notification notification--promo" data-text="{{ section.settings.promo_bar_text | strip_html | handle }}">
<div class="page-width notification__inner {% if section.settings.promo_bar_link != blank %} notification__inner--has-link{% endif %}">
{% if section.settings.promo_bar_link != blank %}
<a href="{{ section.settings.promo_bar_link }}" class="notification__link">
<span class="notification__message">{{ section.settings.promo_bar_text }}</span>
</a>
{% else %}
<span class="notification__message">{{ section.settings.promo_bar_text }}</span>
{% endif %}
<button type="button" class="text-link notification__close" id="NotificationPromoClose">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'cart.general.close_notification' | t }}</span>
</button>
</div>
</div>
{% endif %}
</header>

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "text",
"id": "logo_max_width",
"label": "Custom logo width (in pixels)",
"default": "450"
},
{
"type": "link_list",
"id": "main_linklist",
"label": "Menu",
"default": "main-menu"
},
{
"type": "checkbox",
"id": "promo_bar_enable",
"label": "Enable promotions bar"
},
{
"type": "text",
"id": "promo_bar_text",
"label": "Promotions bar text"
},
{
"type": "url",
"id": "promo_bar_link",
"label": "Promotions bar link",
"info": "Optional"
}
]
}
{% endschema %}

0 Likes
Highlighted
Shopify Expert
2626 440 565

Hi,

Simply you can hide bar from mobile using this code:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

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

Note: If can not work then send your store URL so i can check

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
2 0 0
Wonderful that worked! Although the actual green background bar is still there just not the text.
0 Likes
Highlighted
Shopify Expert
2626 440 565

Send me your store url so i can give exact solution or if you can't here then mail me 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
26 0 1

Hi Jasoliya,

I've used your solution to remove the promo bar from mobile only which is great. I also have the problem of the red bar still appearing (I've moved it to on top of the header). 

Do you have a solution for removing the promo bar altogether as mentioned above?

 

Many thanks,

Neil

0 Likes
Highlighted
Shopify Expert
2626 440 565

Send me your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Shopify Expert
2626 440 565

Add this css:

@media only screen and (max-width: 767px) {
    #NotificationPromo{display:none;}
}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Tourist
26 0 1

Perfect! Thanks for your help

0 Likes