How can I modify the font and hover effects in my announcement bar?

I would like to modify the announcement-bar.liquid so that I can change the font of the text, prevent it from highlighting in blue, and make the text bold when hovering over it with the mouse. Similar to what is on this website: https://jellybag.pl/

I upload my announcement-bar.liquid

@Basti2 - can you share your website page link?

Hello @Basti2 ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

https://gadgetsyouneed.shop/

password: shopusa

@GemPages

@suyash1

@Basti2

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.announcement-bar__message:hover {
  font-weight: 600;
}

@Basti2

For make you announce bar Similiar like https://jellybag.pl/ follow this steps :

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.announcement-bar__message:hover{
  font-weight: bold;
}
.announcement-bar{
  display: flex;
  justify-content: space-between;
}

you can add more message from your theme customization in {{ block.settings.text | escape }}.

you get perfect result as you want.

Best Regards !

Hello @Basti2 ,

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

  1. Open your theme.liquid theme file

  2. Paste the below code before


Let us know how it works for you.

Best regards,
GemPages Support Team

@GemPages

@infoatcodelab7

Thank you, I entered these codes, And it did work, but only in the standard anno bard.

How to make it work also in custom announce bar with 4 links?

By the way, to center everything because it’s on the left.

Screen.