How to reduce size of announcement bar? -spotlight theme

Nikxj44
Excursionist
42 2 7

So, I have strange issue, on "contact" page announcement bar is unusual size, on other pages it's normal, how to fix this issue? I will attach screenshots. 

 

Also, on shopify Admin page issue disappears. But on actual website Its incorrect.

website : https://kartbagrationvalley.com/

Passwod: KBV

Nikxj44_1-1716147804817.png

Nikxj44_2-1716147827619.png

 

 

Replies 4 (4)

Nikxj44
Excursionist
42 2 7

Also strangely issue disappears on my laptop and mobile version, I have this issue only on my pc. What can cause such a issue?

PageFly-Noah
Shopify Partner
1283 227 260

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
.utility-bar {
    height: 30px !important;
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
7990 1559 1583

Hi @Nikxj44 

You can solve it by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
.utility-bar { height: auto !important; }
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ZestardTech
Shopify Expert
5615 1021 1348

Hello There,

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:

.utility-bar.color-scheme-4.gradient.utility-bar--bottom-border {
height: 32px;
}

 

ZestardTech_0-1716181549915.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing