How Do I Change/ Decrease The Height Of The Announcement Bar - IRA Theme

Topic summary

Goal: Reduce the height of the announcement bar in the IRA theme and adjust header/menu styling.

Key steps and outcomes:

  • Store URL shared to diagnose. Solution given: edit theme.liquid (the main layout file) and add a CSS snippet inside the to change the announcement bar height by adjusting a pixel value. A screenshot was attached; code was provided in-thread.
  • Additional request: center the main menu in the updated theme. A CSS snippet was provided and worked.
  • Visual issue: category menu titles looked dull in the new version. Advised to check theme settings first; alternatively, apply a CSS fix. User confirmed improvement.

Most recent update (status):

  • On mobile view, the menu is not properly centered. A short video was shared to illustrate the issue. A fix has been requested; no final solution posted yet, so the thread remains open.

Notes:

  • Central assets: screenshot(s) showing where to paste code, comparison images of menu color, and a mobile demo video.
  • Terms: CSS = styling code; announcement bar = top site banner; theme.liquid = theme’s master template file.
Summarized with AI on January 3. AI used: gpt-5.

Hi all,
I want to decrease the announcement bar height.
Any help?

Hello @Carevip
can you share store URL?

Hey @Carevip ,

Can you share the link to your store please? Thanks!

Yup you can change the height of the announcement bar, Which theme you are using , and also could you please share here store link. So i can share the css code for that.

Thanks.

I’m Using IRA Theme,
Store Link: https://vipinners.com/

Hey @Carevip ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

You can increase/decrease the bar height by changing the 5px value. Leave the last 0px as is.


Screenshot is for reference only, the correct code to paste is the one shown above.

1 Like

Thank you so much.

Also one more query,

This is my current live store which is old version.
https://vipinners.com/

But the theme got updated, in my new updated theme, the Main Menu is not in center.
Preview Link: https://jwazi9pelgzrz3oy-68518576424.shopifypreview.comhttps://vipinners.com/?_ab=0&_fd=0&_sc=1

Any Idea, Where to find the code in old theme?
In Short, I want my menu in Center/Middle.

You can just use the code below to center it. The steps are the same as I mentioned above.


1 Like

Thank you so much again :folded_hands:

It Worked, but the Categorie menu title are dull in color in new version.

Old Version:

Any idea about this?

It was like that before centering. You should check the theme settings.

In case you cannot find where you set it then apply this code


Hi,

Its working good, but in mobile view, its not aligned properly in center.

Video Link: https://www.youtube.com/shorts/IWz1v-kda88

Any idea how to fix that?