Looking to reduce navigation bar height on Modular Theme - Mobile

Solved
Highlighted
Tourist
8 1 0

Hello,

 

My site is www.playwithsolar.com and I'm looking to reduce the height of the red top bar navigation when on mobile. It's been tricky because of how it resizes when scrolls (Ideally the initial state would be close to if not that exact height). I'm using the Modular theme

 

Many thanks!

0 Likes
Highlighted
Shopify Partner
87 29 20

This code should keep the initial header the same size but reduce the size when scrolling! Just add to the end of your style.scss

.site-header.is-hamburger.has-scrolled {
    height: 50px;
    .header-fix-cont {
        height: 50px;
    }
}

@media (max-width: 767px) {
    .site-header.is-hamburger.has-scrolled .main-logo {
        height: 50px;
    }
}
Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
0 Likes
Tourist
8 1 0

hi there!

 

Thank you so much for getting back me. I added the code but I don't see the update. Ideally, the header when the site first loads, is shorter. When it scrolls, i'm ok with the size of the header - it's just when it first loads before I scroll that it's too tall. 

 

Many thanks!

0 Likes
Highlighted

Success.

Tourist
8 1 0

I removed the 

.has-scrolled

 from the code and it worked! Many thanks!

 

.site-header.is-hamburger{    height: 50px;
    .header-fix-cont {        height: 50px;
    }
}

@media (max-width: 767px) {
    .site-header.is-hamburger .main-logo {        height: 50px;
    }
}

 

0 Likes