How can I relocate and resize the announcement bar below my header?

[Ivnvu]

Hello,

I'm trying to figure out how to move the announcement bar bellow my header, is there a way to do this? And, would it be possible to make the announcement bar thicker and increase the font size?

All help is appreciated, thanks!  

[Ivnvu]

This is my store: gryningens

[Hollaz1099]

---

@Ivnvu wrote:

This is my store: gryningens

---

it nice meeting you , you have a beautiful store but you need more professional settings on it and I have a professional who can help on that but what about your sales also ??

[James_FoxEcom]

Hi @Ivnvu 

It's James from FoxEcom team, could you let me know which theme you are using?

To increase the text size and make it bolder, please use the CSS below

.announcement-bar .announcement-bar__content .announcement {
  font-size: 18px;
  font-weight: bold;
}

[Ivnvu]

Hi James, I'm using the Local theme from the theme store 🙂

[GemPages]

Hello @Ivnvu ,

It's GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
#shopify-section-announcement-bar announcement-bar {
  padding: 8px 0;
}
.announcement-bar .announcement-bar__content .announcement {
  font-size: 22px !important;
}
.announcement-bar__localization-form .localization-form .localization-form__item {
  font-size: 16px !important;
}
</style>

For example,

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[James_FoxEcom · Accepted solution]

Hi @Ivnvu 

I don't have this theme code so I cannot show you exactly, but I think they do the same as any theme. To move the announcement bar to below the header, please follow the following steps:

- Edit theme code -> Open file layout/theme.liquid

- Fine the line where insert the section header and announcement like this: https://take.ms/Coy9s

- Swap the order of these sections like my screenshot: https://take.ms/zg4qA

If your code are different and difficult to find them, please give me a screenshot.

Thank you

[Ivnvu]

Thank you James, that did the trick!! 😄

[James_FoxEcom]

you are welcome 😄