Header height is different on my homepage and I don't know why.

Solved

Header height is different on my homepage and I don't know why.

indigohill
Not applicable
2 0 1

I am using the Dawn 5.0.0 theme. I have done some coding on my own and am not sure why my homepage has a different header height than my other pages.

I want it to be like the homepage. I'll attach a couple of screenshots.

 

My URL is indigo-hill.com

homepage_header.JPGshop_header.JPG

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
11633 2280 2462

This is an accepted solution.

Because your homepage has h1 wrap your image logo and you set max height for itScreenshot 2024-03-29 at 15.06.14.png

But on other pages, it does not have the h1 heading wrap logo, so it displays the real height of the logo image.

Screenshot 2024-03-29 at 15.06.47.png

I recommend you crop spaces above and below your current logo so it can solve this issue. 

Screenshot 2024-03-29 at 15.10.35.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 5 (5)

Guleria
Shopify Partner
4113 804 1156

Hello @indigohill ,

 

Update the custom css you added in at the bottom of file base.css

.header__heading{justify-self:center!important;height:135px!important;margin-top:0!important;max-height:135px!important;display:flex;align-items:center;align-content:flex-start;justify-content:space-between;width:100%!important}

with this 

.header__heading, .header__heading-link{justify-self:center!important;height:135px!important;margin-top:0!important;max-height:135px!important;display:flex;align-items:center;align-content:flex-start;justify-content:space-between;width:100%!important}

 

Thanks

 

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

Raj-webdesigner
Shopify Partner
361 90 88

Add This Css in Your Edite Code > Base.css File

a.header__heading-link.link.link--text.focus-inset {
    justify-self: center !important;
    height: 135px !important;
    max-height: 135px !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


Dan-From-Ryviu
Shopify Partner
11633 2280 2462

This is an accepted solution.

Because your homepage has h1 wrap your image logo and you set max height for itScreenshot 2024-03-29 at 15.06.14.png

But on other pages, it does not have the h1 heading wrap logo, so it displays the real height of the logo image.

Screenshot 2024-03-29 at 15.06.47.png

I recommend you crop spaces above and below your current logo so it can solve this issue. 

Screenshot 2024-03-29 at 15.10.35.png

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

indigohill
Not applicable
2 0 1

Wow, thank you so much! I was afraid I would have to change a bunch of coding. This was a simple fix!

Dan-From-Ryviu
Shopify Partner
11633 2280 2462

Happy I could help 😁!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.