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

SoftAndStylish
Tourist
3 0 0

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)

Replies 4 (4)

zaczee
Globetrotter
848 46 42

Hi @SoftAndStylish ,

 

Can you Share your store url

 

SoftAndStylish
Tourist
3 0 0

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

 

Is that safe?

zaczee
Globetrotter
848 46 42

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; }

 

SoftAndStylish
Tourist
3 0 0

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?