How to add a color border underneath and move the announcement bar?

Store Design
,
1

HEADER: color border underneath

Looking to enter a color border underneath

ADDITIONALLY, move the announcement bar to ABOVE the header

Thanks in advance!!

BW,

Tim

wilfreds.shop

2

@tim_wilfreds

1- use below code into your styles.min.css file in theme files for header border bottom.

body header {
	border-bottom: 2px solid #789276;
}

2- changing the place of announcement bar

2024-03-13 17_48_56-Window.png
2024-03-13 17_48_56-Window.png1055×861 75.8 KB

3

Hi Thanks for that

header bottom border worked perfect

Moving announcement bar not the same as in your screenshot, please see my attached

Screenshot 2024-03-13 at 20.55.19.png
Screenshot 2024-03-13 at 20.55.19.png954×502 35.5 KB

4

@tim_wilfreds

you can change the bar from the theme.liquid file to above the folder can you please share your theme.liquid file code so that i can share the solution with you.

thanks

5

Thankyou in advance

body footer { background-color: #FAF7F5 !important; margin: 0 !important; } body header { background-color: #FAF7F5 !important; margin: 0 !important; }

{%- render ‘head’ -%}
{% include ‘buddha-megamenu-before’ %}
{% include ‘buddha-megamenu’ %}
{{ content_for_header }}
{% render ‘globo.alsobought.script’ %}
{%- render ‘bold-options-hybrid’ -%}
{%- render ‘bold-common’ -%}
{% if template == ‘product’ and product.metafields.inventory.ShappifyHidden or product.type contains ‘HIDDEN’ %}{% endif %}

@media(min-width:768px){ .globo-mobile-custom{ display:none !important; } } @media(max-width:767px){ .globo-desktop-custom{ display:none!important; } .gm-menu-installed .header-navigation nav .responsiveMenu.isMobile ul { position: unset !important; left:0 !important; } } ul.gm-submenu.gm-dropdown.gm-submenu-bordered.gm-orientation-vertical.gm-jc-left{ height:auto !important; }

{% include ‘pagefly-app-header’ %}

{% include 'buddha-megamenu-wireframe' %}
{{ 'layout.general.skipto' | t }} {%- render 'no-script' -%} {% section 'header' %} {% section 'header-announcement' %}
{% capture pagefly_content_for_layout %} {{ content_for_layout }} {% endcapture %} {% render 'pagefly-render-section', pagefly_content_for_layout: pagefly_content_for_layout %}
{% section 'footer-brands' %} {% section 'footer' %}
{% if request.page_type == 'product' %} {% render 'gpo-custom' %} {% endif %}
6

body footer { background-color: #FAF7F5 !important; margin: 0 !important; } body header { background-color: #FAF7F5 !important; margin: 0 !important; }

{%- render ‘head’ -%}
{% include ‘buddha-megamenu-before’ %}
{% include ‘buddha-megamenu’ %}
{{ content_for_header }}
{% render ‘globo.alsobought.script’ %}
{%- render ‘bold-options-hybrid’ -%}
{%- render ‘bold-common’ -%}
{% if template == ‘product’ and product.metafields.inventory.ShappifyHidden or product.type contains ‘HIDDEN’ %}{% endif %}

@media(min-width:768px){ .globo-mobile-custom{ display:none !important; } } @media(max-width:767px){ .globo-desktop-custom{ display:none!important; } .gm-menu-installed .header-navigation nav .responsiveMenu.isMobile ul { position: unset !important; left:0 !important; } } ul.gm-submenu.gm-dropdown.gm-submenu-bordered.gm-orientation-vertical.gm-jc-left{ height:auto !important; }

{% include ‘pagefly-app-header’ %}

{% include 'buddha-megamenu-wireframe' %}
{{ 'layout.general.skipto' | t }} {%- render 'no-script' -%} {% section 'header' %} {% section 'header-announcement' %}
{% capture pagefly_content_for_layout %} {{ content_for_layout }} {% endcapture %} {% render 'pagefly-render-section', pagefly_content_for_layout: pagefly_content_for_layout %}
{% section 'footer-brands' %} {% section 'footer' %}
{% if request.page_type == 'product' %} {% render 'gpo-custom' %} {% endif %}
7

please just replace the placement of the announcement bar like i did below.

{% section ‘header-announcement’ %}
{% section ‘header’ %}

thanks