FROM CACHE - en_header
Promotion image

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

Solved

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

Carevip
Tourist
14 0 0
‎03-09-2024 08:07 AM

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

Labels:
977 Views
0 Likes
Report
Accepted Solutions (3)

ThePrimeWeb
Shopify Partner
2138 616 502
‎03-11-2024 02:45 AM

This is an accepted solution.

Hey @Carevip,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" 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.

<style>
.announcement-bar__item.ff-body.fs-body-small {
    padding: 5px 0px !important;
}
</style>

 

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

 

ThePrimeWeb_0-1710139475299.jpeg

 

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

912 Views
1 Like
Report
In response to Carevip

ThePrimeWeb
Shopify Partner
2138 616 502
‎03-11-2024 03:17 AM

This is an accepted solution.

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

 

<style>
.header__links-list.fs-body-base {
  margin: auto !important;
}
</style>
Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

907 Views
1 Like
Report
In response to Carevip

ThePrimeWeb
Shopify Partner
2138 616 502
‎03-11-2024 03:30 AM

This is an accepted solution.

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

 

<style>
.header__links a.active {
  opacity: 1 !important;
}
</style>
Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

895 Views
0 Likes
Report
Replies 11 (11)

niraj_patel
Shopify Partner
2378 514 511
‎03-09-2024 08:18 AM

Hello @Carevip 
can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]
968 Views
0 Likes
Report

ThePrimeWeb
Shopify Partner
2138 616 502
‎03-09-2024 08:55 AM

Hey @Carevip,

 

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!
956 Views
0 Likes
Report

arraynex
Shopify Partner
25 2 2
‎03-09-2024 09:33 AM

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.

Arraynex- Shopify Partner- Helping eCommerce Stores


Was my reply helpful? Accept it as a solution  ☕ Buy me a coffee ☕


Replace apps with copy/paste code snippets. save money - click here.


Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


947 Views
0 Likes
Report
In response to arraynex

Carevip
Tourist
14 0 0
‎03-11-2024 02:42 AM

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

913 Views
0 Likes
Report

ThePrimeWeb
Shopify Partner
2138 616 502
‎03-11-2024 02:45 AM

This is an accepted solution.

Hey @Carevip,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" 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.

<style>
.announcement-bar__item.ff-body.fs-body-small {
    padding: 5px 0px !important;
}
</style>

 

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

 

ThePrimeWeb_0-1710139475299.jpeg

 

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!
913 Views
1 Like
Report
In response to ThePrimeWeb

Carevip
Tourist
14 0 0
‎03-11-2024 03:13 AM

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.


909 Views
0 Likes
Report
In response to Carevip

ThePrimeWeb
Shopify Partner
2138 616 502
‎03-11-2024 03:17 AM

This is an accepted solution.

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

 

<style>
.header__links-list.fs-body-base {
  margin: auto !important;
}
</style>
Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!
908 Views
1 Like
Report
In response to ThePrimeWeb

Carevip
Tourist
14 0 0
‎03-11-2024 03:19 AM

Thank you so much again 🙏

902 Views
0 Likes
Report
In response to ThePrimeWeb

Carevip
Tourist
14 0 0
‎03-11-2024 03:27 AM

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

Screenshot 2024-03-11 125502.jpg


Old Version: 

old.jpg

 

Any idea about this?

 

897 Views
0 Likes
Report
In response to Carevip

ThePrimeWeb
Shopify Partner
2138 616 502
‎03-11-2024 03:30 AM

This is an accepted solution.

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

 

<style>
.header__links a.active {
  opacity: 1 !important;
}
</style>
Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!
896 Views
0 Likes
Report
In response to ThePrimeWeb

Carevip
Tourist
14 0 0
‎03-12-2024 03:16 AM

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?

849 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy