Remove Announcement Bar on Single Page

[MitchB]

Hey all,

I'm using Turbo theme, and I'd like to remove the Announcement Bar from a single page - I feel like this should be super easy, but I can't figure out how to do it.

Anyone have an idea?

Website ishttps://www.deeto.co/ & the page I want to remove the Announcement Bar from is https://www.deeto.co/pages/winter-detox-challenge

Thanks!

[KetanKumar]

@MitchB 

Thanks for post.

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[Guleria]

Hello Mitch,

You have to wrap announcement bar code in a if condition and it will be done.

{% if page.handle  == 'winter-detox-challenge' %}
  <!-- leave it blank --!>
{% else %}
<!-- your existing announcement bar code goes here -->
  {% endif %}

You can find announcement bar existing code in header.liquid under sections.
Hope it will help you.

Thanks

[MitchB]

Thanks guys,

How do identify the Announcement Bar code that needs to be modified in header.liquid ?

Below is my current header.liquid file

---

{% comment %}
** Header - default view **
<!-- ManyChat -->
<script src="//widget.manychat.com/310640756226236.js" async="async"></script>
- Static section
{% endcomment %}

{% comment %} Structured data {% endcomment %}

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "{{ shop.name }}",
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append:'x' %}
"logo": "https:{{ section.settings.logo | img_url: image_size }}",
{% endif %}
"sameAs": [
"{{ settings.twitter_link }}",
"{{ settings.facebook_link }}",
"{{ settings.pinterest_link }}",
"{{ settings.instagram_link }}",
"{{ settings.tumblr_link }}",
"{{ settings.snapchat_link }}",
"{{ settings.youtube_link }}",
"{{ settings.vimeo_link }}"
],
"url": "{{ shop.url }}{{ page.url }}"
}
</script>

{% if template.name == 'index' %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "{{ shop.name }}",
"potentialAction": {
"@type": "SearchAction",
"target": "{{ shop.url }}/search?q={search_term_string}",
"query-input": "required name=search_term_string"
},
"url": "{{ shop.url }}{{ page.url }}"
}
</script>
{% endif %}

{% comment %}Mobile navigation{% endcomment %}
<header id="header" class="mobile_nav-fixed--{{ section.settings.fixed_header }}">
{% if section.settings.promo_text != blank %}
<div class="promo_banner">
<div class="promo_banner__content">
{{ section.settings.promo_text }}
</div>
<div class="promo_banner-close"></div>
</div>
{% endif %}
<div class="top_bar clearfix">
<a class="mobile_nav dropdown_link" data-dropdown-rel="menu" data-no-instant="true">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span class="menu_title">{{ 'layout.general.menu' | t }}</span>
</a>
<a href="{{ shop.url }}" title="{{ shop.name | escape }}" class="mobile_logo logo">
{% if section.settings.logo_mobile != nil %}
<img src="{{ section.settings.logo_mobile | img_url: '410x' }}" alt="{{ shop.name | escape }}" class="lazyload" />
{% elsif section.settings.logo != nil %}
<img src="{{ section.settings.logo | img_url: '410x' }}" alt="{{ shop.name | escape }}" />
{% else %}
{{ shop.name }}
{% endif %}
</a>
<div class="top_bar--right">
{% if section.settings.search_enabled %}
<a href="/search" class="icon-search dropdown_link" title="{{ 'general.search.title' | t | escape }}" data-dropdown-rel="search"></a>
{% endif %}
{% if section.settings.show_cart %}
<div class="cart_container">
<a href="/cart" class="{% if section.settings.cart_icon == "cart" %}icon-cart{% else %}icon-bag{% endif %} mini_cart dropdown_link" title="{{ 'layout.general.cart' | t | escape }}" data-no-instant> <span class="cart_count">{{ cart.item_count }}</span></a>
{% unless settings.cart_action == 'ajax' and template contains 'cart' %}
<div class="cart_content animated fadeIn">
<div class="js-empty-cart__message {% if cart.item_count > 0 %}hidden{% endif %}">
<p class="empty_cart">{{ 'layout.general.empty_cart' | t }}</p>
</div>
<form action="/checkout" method="post" data-money-format="{{ shop.money_format }}"
data-shop-currency="{{ shop.currency }}" data-shop-name="{{ shop.name | escape }}"
class="js-cart_content__form {% if cart.item_count == 0 %}hidden{% endif %}">
<a class="cart_content__continue-shopping secondary_button">
{{ 'cart.general.continue_shopping_link_html' | t }}
</a>
<ul class="cart_items js-cart_items clearfix">
{% assign total_saving = 0 %}
{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{% assign saving = item.variant.compare_at_price | minus: item.variant.price | times: item.quantity %}
{% assign total_saving = saving | plus: total_saving %}
{% endif %}

<li class="mini-cart__item clearfix">

<a href="{{ item.url }}">
{% if item.image %}
<div class="cart_image mini-cart__item-image">
<img src="{{ item | img_url: '320x' }}" alt="{{ item.title | escape }}"
class="lazyload"/>
</div>
{% endif %}
</a>

<div class="mini-cart__item--content">
<div class="mini-cart__item__title">
<div class="item_title">
<a href="{{ item.url }}">
{{ item.product.title }}
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
-
{% for option in item.product.options %}
{{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
{% endfor %}
{% endunless %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}
<div class="line-item">
{{ p.first }}: {{ p.last }}
</div>
{% endif %}
{% endfor %}
{% endif %}
</a>
</div>
</div>

<strong class="left price">
{% if item.line_level_discount_allocations.size > 0 %}
<span class="money sale">
{{ item.final_price | money }}
</span>
{% endif %}
<span class="money {% if item.line_level_discount_allocations.size > 0 %}was_price{% endif %} {% if item.price < item.variant.compare_at_price %}sale{% endif %}">
{{ item.original_price | money }}
</span>
</strong>

{% if item.line_level_discount_allocations.size > 0 %}
{% for discount_allocation in item.line_level_discount_allocations %}
<p class="notification-discount meta">
{{ discount_allocation.discount_application.title }}
</p>
{% endfor %}
{% endif %}

<div class="left product-quantity-box">
<span class="ss-icon product-minus js-change-quantity" data-func="minus"><span
class="icon-minus"></span></span>
<input type="number" min="0" size="2" class="quantity" name="updates[]"
id="updates_{{ item.id }}" value="{{ item.quantity }}"
data-line-id="{{ forloop.index }}"/>
<span class="ss-icon product-plus js-change-quantity" data-func="plus"><span
class="icon-plus"></span></span>
</div>

</div>

<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="cart__remove-btn"
data-line-id="{{ forloop.index }}"><span
class="remove-text">{{ 'cart.general.remove' | t }}</span> <span
class="remove-icon"></span></a>

</li>
{% endfor %}
</ul>

<ul>

<li class="cart_discounts js-cart_discounts sale">
{% if cart.cart_level_discount_applications != blank %}
{% for discount_application in cart.cart_level_discount_applications %}
<span class="cart_discounts--title">{{ discount_application.title }}</span>
<span class="cart_discounts--price">
-<span class="money">{{ discount_application.total_allocated_amount | money }}</span>
</span>
{% endfor %}
{% endif %}
</li>

<li class="cart_subtotal js-cart_subtotal">
<span class="right">
<span class="money">{{ cart.total_price | money }}</span>
</span>
<span>{{ 'layout.general.subtotal' | t }}</span>
</li>
{% if settings.display_savings %}
<li class="cart_savings sale js-cart_savings">
{% if cart.total_price < cart.original_total_price %}
<span class="right">
<span class="money">{{ cart.original_total_price | minus: cart.total_price | money }}</span>
</span>
<span>{{ 'layout.general.savings' | t }}</span>
{% endif %}
</li>
{% endif %}
<li>
{% if settings.display_special_instructions and settings.go_to_checkout %}
<textarea id="note" name="note" rows="2" placeholder="{{ 'layout.general.cart_note' | t }}"
class="clearfix">{{ cart.note }}</textarea>
{% endif %}

{% if settings.display_tos_checkbox and settings.go_to_checkout %}
<p class="tos">
<input type="checkbox" class="tos_agree" id="sliding_agree" required/>
<label class="tos_label">
{{ 'cart.general.agree_to_terms_html' | t }}
</label>
{% if settings.tos_page != blank %}
<a href="{{ pages[settings.tos_page].url }}" target="_blank"
class="tos_icon">{{ 'cart.general.view_terms' | t }}</a>
{% endif %}
</p>
{% endif %}

{% if settings.cart_message != blank %}
<div class="cart_text">
{{ settings.cart_message }}
</div>
{% endif %}

{% if settings.go_to_checkout %}
<button type="submit" class="action_button add_to_cart">{% if settings.show_lock_icon %}<span
class="icon-lock"></span>{% endif %}{{ 'layout.general.checkout' | t }}</button>
{% else %}
<button type="submit" class="action_button add_to_cart">{% if settings.show_lock_icon %}<span
class="icon-lock"></span>{% endif %}{{ 'layout.general.go_to_cart' | t }} </button>
{% endif %}
</li>
</ul>
</form>
</div>
{% endunless %}
</div>
{% endif %}
</div>

</div>
{% if section.settings.search_enabled %}
<div class="dropdown_container center" data-dropdown="search">
<div class="dropdown">
<form action="/search" class="header_search_form">
{% if settings.search_option != 'everything' %}
<input type="hidden" name="type" value="product" />
{% endif %}
<span class="icon-search search-submit"></span>
<input type="text" name="q" placeholder="{{ 'general.search.title' | t: shop_name: shop.name }}" autocapitalize="off" autocomplete="off" autocorrect="off" class="search-terms" />
</form>
</div>
</div>
{% endif %}
<div class="dropdown_container" data-dropdown="menu">
<div class="dropdown">
<ul class="menu" id="mobile_menu">
{% include 'mobile-menu' with section.settings.main_linklist %}
{% include 'mobile-menu' with section.settings.main_linklist2 %}
{% include 'mobile-menu' with section.settings.top_bar_menu %}
{% if section.settings.phone_number != blank %}
<li><a href="tel:+{{ section.settings.phone_number | replace: ' ', '' | replace: '+', '' | replace: '-', '' }}">{{ section.settings.phone_number }}</a></li>
{% endif %}

{% if shop.customer_accounts_enabled %}
{% if customer %}
<li>
<a href="/account" data-no-instant>{{ customer.name }}</a>
</li>
<li data-no-instant>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li data-no-instant>
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
{% endif %}
{% endif %}
{% if settings.show_multiple_currencies %}
<li>
{% include 'currencies-switcher' %}
</li>
{% endif %}
</ul>
</div>
</div>
</header>

{% if template contains "index" %}
{% assign feature_image = true %}
{% elsif template contains "collection" %}
{% assign feature_image = true %}
{% elsif template contains "blog" %}
{% assign feature_image = true %}
{% elsif template contains "article" %}
{% assign feature_image = true %}
{% elsif template contains "contact" %}
{% assign feature_image = true %}
{% elsif template contains "product" %}
{% assign feature_image = true %}
{% elsif template contains "gallery" %}
{% assign feature_image = true %}
{% elsif template contains "banner" %}
{% assign feature_image = true %}
{% elsif template contains "details" %}
{% assign feature_image = true %}
{% elsif template contains "faq" %}
{% assign feature_image = true %}
{% elsif template contains "search" %}
{% assign feature_image = true %}
{% elsif template contains "cart" %}
{% assign feature_image = true %}
{% else %}
{% assign feature_image = false %}
{% endif %}

{% comment %}Main navigation{% endcomment %}
<header class="{% if feature_image %}feature_image{% endif %} {% if section.settings.logo_home != nil %}secondary_logo--true{% endif %}">
<div class="header {% if feature_image and settings.header_background == false %}is-absolute {% endif %} header-fixed--{{ section.settings.fixed_header }} {% if settings.header_background %}header-background--solid{% endif %}">
{% if section.settings.promo_text != blank %}
<div class="promo_banner">
<div class="promo_banner__content">
{{ section.settings.promo_text }}
</div>
<div class="promo_banner-close"></div>
</div>
{% endif %}
{% if section.settings.social_icons_header or section.settings.phone_number != blank or section.settings.top_bar_menu != blank %}
<div class="top_bar clearfix">
{% if section.settings.social_icons_header %}
{% include 'social-icons' %}
{% endif %}
<ul class="menu left">
{% if section.settings.phone_number != blank %}
<li><a href="tel:+{{ section.settings.phone_number | replace: ' ', '' | replace: '+', '' | replace: '-', '' }}">{{ section.settings.phone_number }}</a></li>
{% endif %}
{% if section.settings.top_bar_menu != blank %}
{% for link in linklists[section.settings.top_bar_menu].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
{% endif %}
</ul>
</div>
{% endif %}

<div class="main_nav_wrapper">
<div class="main_nav clearfix menu-position--{{ section.settings.menu_position }} logo-align--{{ section.settings.logo_position }} search-enabled--{{ section.settings.search_enabled }}">
{% capture logo %}
<div class="logo {% if section.settings.menu_position == 'block' %} text-align--{{ section.settings.logo_alignment }}{% else %} text-align--center {% endif %}">
<a href="{{ shop.url }}" title="{{ shop.name }}">
{% if section.settings.logo_home != nil %}
<img src="{{ section.settings.logo_home | img_url: '410x' }}" class="secondary_logo" alt="{{ shop.name | escape }}" />
{% endif %}
{% if section.settings.logo != nil %}
<img src="{{ section.settings.logo | img_url: '410x' }}" class="primary_logo lazyload" alt="{{ shop.name | escape }}" />
{% else %}
{{ shop.name }}
{% endif %}
</a>
</div>
{% endcapture %}

{% assign vertical_menu = section.settings.vertical_menu %}

{% capture menu_left %}
{% if vertical_menu %}
{% include 'vertical-menu' with section.settings.main_linklist %}
{% else %}
{% include 'menu' with section.settings.main_linklist %}
{% endif %}
{% endcapture %}

{% capture menu_right %}
{% if vertical_menu %}
{% include 'vertical-menu' with section.settings.main_linklist2 %}
{% else %}
{% include 'menu' with section.settings.main_linklist2 %}
{% endif %}
{% if section.settings.search_enabled %}

<div class="search-wrapper">
{% comment %}
<li class="search_container" data-autocomplete-{{ settings.enable_autocomplete }}>
<form action="/search" class="search_form">
{% if settings.search_option != 'everything' %}
<input type="hidden" name="type" value="product" />
{% endif %}
<span class="icon-search search-submit"></span>
<input type="text" name="q" placeholder="{{ 'general.search.title' | t: shop_name: shop.name }}" value="{% if search and search.results.first.price %}{{ search.terms | replace: '*', '' }}{% endif %}" autocapitalize="off" autocomplete="off" autocorrect="off" />
</form>
</li>
{% endcomment %}
<li class="search_link" style="display: block;">
<a href="/search" class="icon-search dropdown_link" title="{{ 'general.search.title' | t | escape }}" data-dropdown-rel="search"></a>
</li>
</div>

{% if section.settings.show_cart %}
<div class="cart_container">
<a href="/cart"
class="{% if section.settings.cart_icon == "cart" %}icon-cart{% else %}icon-bag{% endif %} mini_cart dropdown_link"
data-no-instant>
<span class="cart_count">{{ cart.item_count }}</span>
</a>
{% unless settings.cart_action == 'ajax' and template contains 'cart' %}
<div class="cart_content animated fadeIn">
<div class="js-empty-cart__message {% if cart.item_count > 0 %}hidden{% endif %}">
<p class="empty_cart">{{ 'layout.general.empty_cart' | t }}</p>
</div>
<form action="/checkout" method="post" data-money-format="{{ shop.money_format }}"
data-shop-currency="{{ shop.currency }}" data-shop-name="{{ shop.name | escape }}"
class="js-cart_content__form {% if cart.item_count == 0 %}hidden{% endif %}">
<a class="cart_content__continue-shopping secondary_button">
{{ 'cart.general.continue_shopping_link_html' | t }}
</a>
<ul class="cart_items js-cart_items clearfix">
{% assign total_saving = 0 %}
{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{% assign saving = item.variant.compare_at_price | minus: item.variant.price | times: item.quantity %}
{% assign total_saving = saving | plus: total_saving %}
{% endif %}

<li class="mini-cart__item clearfix">

<a href="{{ item.url }}">
{% if item.image %}
<div class="cart_image mini-cart__item-image">
<img src="{{ item | img_url: '320x' }}" alt="{{ item.title | escape }}"
class="lazyload"/>
</div>
{% endif %}
</a>

<div class="mini-cart__item--content">
<div class="mini-cart__item__title">
<div class="item_title">
<a href="{{ item.url }}">
{{ item.product.title }}
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
-
{% for option in item.product.options %}
{{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
{% endfor %}
{% endunless %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}
<div class="line-item">
{{ p.first }}: {{ p.last }}
</div>
{% endif %}
{% endfor %}
{% endif %}
</a>
</div>
</div>

<strong class="left price">
{% if item.line_level_discount_allocations.size > 0 %}
<span class="money sale">
{{ item.final_price | money }}
</span>
{% endif %}
<span class="money {% if item.line_level_discount_allocations.size > 0 %}was_price{% endif %} {% if item.price < item.variant.compare_at_price %}sale{% endif %}">
{{ item.original_price | money }}
</span>
</strong>

{% if item.line_level_discount_allocations.size > 0 %}
{% for discount_allocation in item.line_level_discount_allocations %}
<p class="notification-discount meta">
{{ discount_allocation.discount_application.title }}
</p>
{% endfor %}
{% endif %}

<div class="left product-quantity-box">
<span class="ss-icon product-minus js-change-quantity" data-func="minus"><span
class="icon-minus"></span></span>
<input type="number" min="0" size="2" class="quantity" name="updates[]"
id="updates_{{ item.id }}" value="{{ item.quantity }}"
data-line-id="{{ forloop.index }}"/>
<span class="ss-icon product-plus js-change-quantity" data-func="plus"><span
class="icon-plus"></span></span>
</div>

</div>

<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="cart__remove-btn"
data-line-id="{{ forloop.index }}"><span
class="remove-text">{{ 'cart.general.remove' | t }}</span> <span
class="remove-icon"></span></a>

</li>
{% endfor %}
</ul>

<ul>

<li class="cart_discounts js-cart_discounts sale">
{% if cart.cart_level_discount_applications != blank %}
{% for discount_application in cart.cart_level_discount_applications %}
<span class="cart_discounts--title">{{ discount_application.title }}</span>
<span class="cart_discounts--price">
-<span class="money">{{ discount_application.total_allocated_amount | money }}</span>
</span>
{% endfor %}
{% endif %}
</li>

<li class="cart_subtotal js-cart_subtotal">
<span class="right">
<span class="money">{{ cart.total_price | money }}</span>
</span>
<span>{{ 'layout.general.subtotal' | t }}</span>
</li>
{% if settings.display_savings %}
<li class="cart_savings sale js-cart_savings">
{% if cart.total_price < cart.original_total_price %}
<span class="right">
<span class="money">{{ cart.original_total_price | minus: cart.total_price | money }}</span>
</span>
<span>{{ 'layout.general.savings' | t }}</span>
{% endif %}
</li>
{% endif %}
<li>
{% if settings.display_special_instructions and settings.go_to_checkout %}
<textarea id="note" name="note" rows="2" placeholder="{{ 'layout.general.cart_note' | t }}"
class="clearfix">{{ cart.note }}</textarea>
{% endif %}

{% if settings.display_tos_checkbox and settings.go_to_checkout %}
<p class="tos">
<input type="checkbox" class="tos_agree" id="sliding_agree" required/>
<label class="tos_label">
{{ 'cart.general.agree_to_terms_html' | t }}
</label>
{% if settings.tos_page != blank %}
<a href="{{ pages[settings.tos_page].url }}" target="_blank"
class="tos_icon">{{ 'cart.general.view_terms' | t }}</a>
{% endif %}
</p>
{% endif %}

{% if settings.cart_message != blank %}
<div class="cart_text">
{{ settings.cart_message }}
</div>
{% endif %}

{% if settings.go_to_checkout %}
<button type="submit" class="action_button add_to_cart">{% if settings.show_lock_icon %}<span
class="icon-lock"></span>{% endif %}{{ 'layout.general.checkout' | t }}</button>
{% else %}
<button type="submit" class="action_button add_to_cart">{% if settings.show_lock_icon %}<span
class="icon-lock"></span>{% endif %}{{ 'layout.general.go_to_cart' | t }} </button>
{% endif %}
</li>
</ul>
</form>
</div>
{% endunless %}
</div>
{% endif %}

<ul class="menu right" style="padding: 0;">
{% if settings.show_multiple_currencies %}
<li>
{% include 'currencies-switcher' %}
</li>
{% endif %}
{% if shop.customer_accounts_enabled %}
<li>
<a href="/account" class="icon-user" title="{{ 'layout.customer.my_account' | t }} {% if customer %}({{ customer.email }}){% endif %}">
{% if section.settings.show_account_text %}<span>{% if customer %}{{ 'layout.customer.my_account' | t }}{% else %}{{ 'layout.customer.log_in' | t }}{% endif %}</span>{% endif %}
</a>
</li>
{% endif %}
</ul>
{% endif %}
{% endcapture %}

{% if section.settings.logo_position == "left" or section.settings.menu_position == "block" %}
{{ logo }}
<div class="nav">
<ul class="menu {{ section.settings.menu_alignment }} clearfix">
{{ menu_left }}
{{ menu_right }}
</ul>
</div>
{% else %}
<div class="nav">
<ul class="menu {{ section.settings.menu_alignment }} clearfix">
{{ menu_left }}
</ul>
</div>
{{ logo }}
<div class="nav">
<ul class="menu {% if section.settings.menu_alignment == 'align_left' %}align_right{% elsif section.settings.menu_alignment == 'align_right' %}align_left{% else %}{{ section.settings.menu_alignment }}{% endif %} clearfix menu-items--right">
{{ menu_right }}
</ul>
</div>
{% endif %}
{% if section.settings.search_enabled %}
<div class="dropdown_container center" data-dropdown="search">
<div class="dropdown" data-autocomplete-{{ settings.enable_autocomplete }}>
<form action="/search" class="header_search_form">
{% if settings.search_option != 'everything' %}
<input type="hidden" name="type" value="product" />
{% endif %}
<span class="icon-search search-submit"></span>
<input type="text" name="q" placeholder="{{ 'general.search.title' | t: shop_name: shop.name }}" autocapitalize="off" autocomplete="off" autocorrect="off" class="search-terms" />
</form>
</div>
</div>
{% endif %}
{% include 'sub-menu' with section.settings.main_linklist %}
{% include 'sub-menu' with section.settings.main_linklist2 %}
</div>
</div>
</div>
</header>

<style>
.main_nav div.logo a {
padding-top: {{ section.settings.logo_top_padding }}px;
padding-bottom: {{ section.settings.logo_top_padding }}px;
}

div.logo img {
max-width: {{ section.settings.logo_display_width }}px;
}

.nav {
{% if section.settings.menu_position == "block" %}
width: 100%;
clear: both;
{% elsif section.settings.logo_position == "left" %}
width: 84%;
float: left;
{% else %}
width: 42%;
float: left;
{% endif %}
}

{% if section.settings.menu_top_padding %}
.nav ul.menu {
padding-top: {{ section.settings.menu_top_padding }}px;
padding-bottom: {{ section.settings.menu_top_padding }}px;
}

{#.sticky_nav ul.menu, .sticky_nav .mini_cart {#}
{#padding-top: {{ section.settings.menu_top_padding | divided_by: 2 }}px;#}
{#padding-bottom: {{ section.settings.menu_top_padding | divided_by: 2 }}px;#}
{#}#}
{% endif %}

{% unless section.settings.show_cart %}
#header .top_bar .icon-search {
right: 15px;
}
{% endunless %}

{% if section.settings.fixed_header == false %}
@media only screen and (max-width: 798px) {
.header-section {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
{% else %}
body {
overscroll-behavior-y: none;
}
{% endif %}

</style>

{% schema %}

{
"name": "Header",
"class": "header-section",
"settings": [
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "richtext",
"id": "promo_text",
"label": "Text",
"info": "Maximum character limit is 170"
},
{
"type": "header",
"content": "Top bar"
},
{
"type": "checkbox",
"id": "social_icons_header",
"label": "Show social media header icons",
"default": true
},
{
"type": "text",
"id": "phone_number",
"label": "Phone number",
"info": "1-800-555-5555"
},
{
"type": "link_list",
"id": "top_bar_menu",
"label": "Menu",
"info": "This menu won't show drop-down items"
},
{
"type": "checkbox",
"id": "show_cart",
"label": "Show cart",
"default": true
},
{
"type": "checkbox",
"id": "show_account_text",
"label": "Show Log In / My Account next to the icon",
"default": false
},
{
"type": "select",
"id": "cart_icon",
"label": "Cart icon",
"options": [
{
"value": "cart",
"label": "Cart"
},
{
"value": "bag",
"label": "Bag"
}
],
"default": "cart"
},
{
"type": "header",
"content": "Logos"
},
{
"type": "range",
"id": "logo_display_width",
"label": "Logo display width",
"step": 5,
"min": 105,
"max": 205,
"default": 205,
"unit": "px"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo",
"info": "400 x 100px recommended"
},
{
"type": "image_picker",
"id": "logo_home",
"label": "Secondary logo over content (optional)",
"info": "400 x 100px recommended"
},
{
"type": "image_picker",
"id": "logo_mobile",
"label": "Mobile logo",
"info": "100 x 50px recommended"
},
{
"type": "header",
"content": "Menus"
},
{
"type": "link_list",
"id": "main_linklist",
"label": "Main menu"
},
{
"type": "link_list",
"id": "main_linklist2",
"label": "Secondary menu"
},
{
"type": "checkbox",
"id": "vertical_menu",
"label": "Enable vertical menus",
"default": false
},
{
"type": "header",
"content": "Search"
},
{
"type": "checkbox",
"id": "search_enabled",
"label": "Show search",
"default": true
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "fixed_header",
"label": "Fixed ('sticky') header",
"default": true
},
{
"type": "select",
"id": "logo_position",
"label": "Logo position",
"info": "Applies when menu position has been set to 'Inline with logo'",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
],
"default": "center"
},
{
"type": "select",
"id": "logo_alignment",
"label": "Logo alignment",
"info": "Applies when menu position has been set to 'Under logo'",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
],
"default": "center"
},
{
"type": "select",
"id": "menu_position",
"label": "Menu position",
"options": [
{
"value": "inline",
"label": "Inline with logo"
},
{
"value": "block",
"label": "Under logo"
}
],
"default": "inline"
},
{
"type": "select",
"id": "menu_alignment",
"label": "Menu alignment",
"options": [
{
"value": "align_left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "align_right",
"label": "Right"
}
],
"default": "align_left"
},
{
"type": "range",
"id": "logo_top_padding",
"label": "Logo top padding",
"info": "[Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115006910627)",
"min": 0,
"max": 30,
"default": 10,
"unit": "px"
},
{
"type": "range",
"id": "menu_top_padding",
"label": "Main menu top padding",
"info": "[Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115006910627)",
"min": 0,
"max": 30,
"default": 0,
"unit": "px"
}
]
}

{% endschema %}

[TheHouzz]

Hello we are also having the same issue, the bar will not change. Would anyone be willing to help? @KetanKumar 

[KetanKumar]

@TheHouzz 

are your able to code try this 

https://codepen.io/konutis/pen/oqBMoP

https://codepen.io/ChrisDrinkut/embed/GvrqNR?height=350&theme-id=dark&slug-hash=GvrqNR&default-tab=h...