How to move the announcement bar inbetween the logo and the navigation menu?

Store Design
1

Hi,

How can I move my announcement bar inbetween the logo and the navigation menu like on this store: www.articture.com ?

I have the Prestige theme.

Thanks in advance.

1 Like
2

Hi @stefan2002

Some developers do not have access to the paid themes. Can you provide the body code in the theme.liquid code?

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Layout folder, open the theme.liquid
  3. Find the code, <body. Please copy / paste the code from <body and the

NOTE: Your theme.liquid code might contain sensitive codes that you do not want to share to anyone. That is the reason I was asking for the body code only

3

Thanks for your reply. This is the body code:

{{ 'header.navigation.skip_to_content' | t }}

{%- if settings.show_page_transition -%}

{%- endif -%}

{% section ‘popup’ %}
{% section ‘sidebar-menu’ %}

{%- if template != ‘cart’ -%}
{% render ‘cart-drawer’ %}
{%- endif -%}

{% section 'announcement' %} {% section 'header' %} {{ content_for_layout }}

{% section ‘footer’ %}

1 Like
4

Hi @stefan2002

Thank you for the code. I see that the header had multiple layers of code. Therefore, we cannot just change the place of the announcement bar. However, we can do some CSS trick. Please follow the instructions below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
div#shopify-section-announcement {
    position: absolute;
    z-index: 6;
    width: 100%;
    top: 65px;
}

#section-header.Header .Header__Wrapper {
    margin-bottom: 40px;
}

@media only screen and (max-width: 990px) {
.AnnouncementBar__Wrapper.AnnouncementBar_more {
    margin: unset;
}
}

@media only screen and (max-width: 767px){
div#shopify-section-announcement {
    display: block
}
}
5

Thanks for the reply. The announcement bar is now below the logo, but the navigation menu is under it, so you can’t see it no more, if that can go down a little it is perfect.

6

And that is only when the logo is centered, if I put it on the left like on the store I mentioned it moves the navigation menu right next to the logo, instead of under the announcement bar

7

Hello @stefan2002

Could you share the store URL so that I can review it?