Does anyone know how I can move my announcement bar under the header?
Thanks in advance guys!
1 Like
Please provide website url and if your store is password protected then also provide password
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
@Jeffrey10 - can we edit code to move code under header, if you want I can check it for you, can you add me to staff or as collaborator?
password: Horsque2021
1 Like
@Jeffrey10
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media screen and (min-width: 1246px) {
#shopify-section-announcement {
position: absolute !important;
width: 100%;
top: 112px;
z-index: 2;
}
}
thanks for URL yes please add this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (min-width: 1240px) {
#shopify-section-announcement {
position: absolute;
width: 100%;
top: 112px;
z-index: 1;
}
}
After code view
That’s cool! Would it also be possible to move it under the slideshow?
Looking forward in hearing from you guys.
Yes, is possible to change backend code
Dear @Jeffrey10
- From your Shopify admin, go to Online Store > themes
- Locate your current theme and then click Actions > Edit code
- After that in the Assets folder, click to open your theme.scss.liquid file
- Go to the very bottom of this file and paste the following code:
/* Start */
#shopify-section-announcement {position: fixed; z-index: 9; width: 100%; top: 113px;}
@media screen and (max-width: 1240px) {
#shopify-section-announcement {top: 67px;}
}
/* End*/
- Save and check your theme by refreshing it.
Hi,
This didn’t work. It made me open the page at half of the page when but the announcement bar stayed at the same place.
Looking forward in hearing from you.
Hi,
How do I do this? 
@Jeffrey10 - I recommend to change code location itself in header file, using css position can be changed but it creates issues with other pages and views
Hi Suyash,
If it creates issues with other pages then never mind.
How can I still do this?
@Jeffrey10 - change code location, you can put announcement bar anywhere you want
so far you tried with css and it creates issues
Hi,
Thanks for your fast response!
Do you have any suggestions in how I can do this?
@Jeffrey10 - go to header.liquid file, find announcement bar code, copy it and paste it where you want and then can remove from original location
{%- assign use_transparent_header = false -%}
{%- if template == 'index' and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}
{%- if template.name == 'collection' and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != 'no-image' -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}
{%- if section.settings.navigation_style != 'sidebar' -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}
{%- if settings.currency_conversion_enabled -%}
{%- capture currency_conversion_select -%}
{%- include 'icon' with 'select-arrow' -%}
{%- endcapture -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
HEADER CONTENT
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- capture section_settings -%}
{
"navigationStyle": {{ section.settings.navigation_style | json }},
"hasTransparentHeader": {% if use_transparent_header %}true{% else %}false{% endif %},
"isSticky": {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}
{% schema %}
{
"name": "Header",
"class": "shopify-section--header",
"settings": [
{
"type": "checkbox",
"id": "use_sticky_header",
"label": "Use sticky header",
"default": true
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 350,
"step": 5,
"unit": "px",
"label": "Logo image width",
"default": 140
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "navigation_menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "select",
"id": "navigation_style",
"label": "Navigation style",
"info": "Setting will default to center style if screen width cannot fit all the links.",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "inline",
"label": "Inline"
},
{
"value": "center",
"label": "Center"
}
],
"default": "inline"
},
{
"type": "header",
"content": "Transparent header"
},
{
"type": "checkbox",
"id": "enable_transparent_header",
"label": "Enable on homepage",
"default": false
},
{
"type": "checkbox",
"id": "enable_transparent_header_collection",
"label": "Enable on collection pages",
"info": "Only if the collection has an image.",
"default": false
},
{
"type": "color",
"id": "transparent_text_color",
"label": "Text/icon color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "transparent_logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
}
],
"blocks": [
{
"type": "mega_menu",
"name": "Mega menu",
"settings": [
{
"type": "text",
"id": "navigation_mega_menu",
"label": "Menu item",
"info": "Enter menu item to apply a mega menu dropdown. [Learn more](http://support.maestrooo.com/article/149-navigation-enabling-and-configuring-mega-menu)."
},
{
"type": "header",
"content": "Image push 1"
},
{
"type": "image_picker",
"id": "push_1_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_1_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_1_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_1_url",
"label": "Link"
},
{
"type": "header",
"content": "Image push 2"
},
{
"type": "image_picker",
"id": "push_2_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_2_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_2_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_2_url",
"label": "Link"
}
]
}
]
}
{% endschema %}