Adjusting Shopify Header Logo Width for Main Menu and Collection Pages (Impulse 7.3.1)

Store Design
1

Theme: Impulse 7.3.1

What are the steps to modify the header on Shopify in order to keep the logo width at 270px on the main menu, and then reduce it to 100px when navigating to any of the collections or other pages? Additionally, how can the logo width be adjusted for mobile devices, from 170px to 100px in the same sense? (I am using both a Black and white logo)

2

Hi @SoftAndStylish ,

Can you Share your store url

3

It has yet to be published. Can I send you the URL and the password to the site?

Is that safe?

4

You can add this CSS in base.css or custom.css

.site-header .site-header__logo img, .header-item--logo { height: 150px; width: auto; }
.header-item--logo { margin: 10px 0 !important; }
1 Like
5

Hey, I highly appreciate your time, digging into this. But this is not a solution.

The code does not create two types of headers. One for the Landing page and a much smaller one for all the other sites/sections. Is that a possibility?