Solved

How to make header smaller and announcement bar bigger Dawn Theme

theswiftshop_
Tourist
8 0 1

I am trying to make it so the header is transparent for the home page which I got, however I cannot get it to be thinner. In attempting to make it thinner, I somehow made my announcement bar much smaller and I don't understand what happened. Please help!

 

https://f63fc3-af.myshopify.com/?_ab=0&_fd=0&_sc=1

 

That's the link to my store.

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Hi @theswiftshop_ 

I'm Dan from Ryviu: Product Reviews & QA.

 

Please crop blank space at the top and bottom of your current logo to reduce the height of your header. Screenshot 2024-02-29 at 09.10.26.png

And then add this code to theme.liquid file after <head> in Online Store > Themes > Edit code to make background white on scroll and fixe the issue with height of your announcement bar

 

<style>
.scrolled-past-header .header-wrapper {
background: #fff;
}
.shopify-section-group-header-group.announcement-bar-section {
height: auto !important;
}
</style>

 

 

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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

View solution in original post

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Please add this code to Customize CSS of section in Online Store > Themes > Customize

.banner__box {
background: rgb(192 192 192 / 50%);
}

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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

View solution in original post

Replies 9 (9)

theswiftshop_
Tourist
8 0 1

I am also trying to make it so the header is white when I scroll down so it can be a sticky header. i just have not been able to make it sticky because of how massive it is.

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Hi @theswiftshop_ 

I'm Dan from Ryviu: Product Reviews & QA.

 

Please crop blank space at the top and bottom of your current logo to reduce the height of your header. Screenshot 2024-02-29 at 09.10.26.png

And then add this code to theme.liquid file after <head> in Online Store > Themes > Edit code to make background white on scroll and fixe the issue with height of your announcement bar

 

<style>
.scrolled-past-header .header-wrapper {
background: #fff;
}
.shopify-section-group-header-group.announcement-bar-section {
height: auto !important;
}
</style>

 

 

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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

theswiftshop_
Tourist
8 0 1

Thank you that worked perfectly! Do you know what might be causing my "Shop Now" button to be a little transparent? My hope was to make the grey area behind the text of "innovative spatula" transparent as well if you knew how to do that.

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

You did not add a link for that Shop Now button which is why you got a little transparent

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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

theswiftshop_
Tourist
8 0 1

Thank you, I just figured that one out right before you replied haha. Do you know how to make the grey area transparent though? Thank you!

 

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Please add this code to Customize CSS of section in Online Store > Themes > Customize

.banner__box {
background: rgb(192 192 192 / 50%);
}

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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

theswiftshop_
Tourist
8 0 1

Thank you for all the help! You saved me many more hours of headaches and I can't believe how quick you helped me!

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

Happy I could help ❤️!

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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

theswiftshop_
Tourist
8 0 1

One last thing Dan,

Would you happen to know why the "related products" portion only works on one of my product pages? I renamed it to being "customers also bought" but on one of my product pages it shows the other product that I have on the store at the moment. However, when I go to product page 2, it just has an empty grey space and I cannot figure out why.

Thanks in advance!