Goal: Keep page text large while shrinking header elements, including icons, on desktop and mobile (burger drawer). The site link and screenshots show the header layout and a mobile logo alignment concern.
Solution provided: CSS to reduce the localization dropdown text size and general header icon dimensions to 1.5rem (a CSS unit relative to the root font size). These changes largely worked.
Remaining issues: The cart icon stayed very small even after tweaking sizes, and the logo did not re-center on mobile; making icons smaller didn’t fix header alignment. A screenshot was shared to illustrate the mobile issue.
Update: Additional CSS specifically targeting the cart icon set it to 2.7rem, and the OP confirmed with thanks. The mobile logo centering and burger drawer alignment were not further addressed, so the thread is partially resolved with icon sizing fixed but mobile header alignment status unclear.
Hi, I am looking to keep the text on my pages large but not anything in the header. I used code to shrink the words in my header but the icons like the search button, currency converter etc are still unchanged. i would also like this solution to work on mobile including the burger drawer. thanks so much
website is www.stagtis.com
@Stagtis Please add the below line of CSS code at the end of your base.css file.
body .header-localization .disclosure .localization-form__select{
font-size:1.1rem;
}
body .header__icon .icon{
height:1.5rem;
width:1.5rem;
}
Hi, thanks so much for replying fast, this works well, But the cart icon remains really small even when I mess with the REM to taste. Also, i should’ve mentioned this, but part of the reason I wanted to this was so that on mobile the logo would be centred again but making the icons smaller doesn’t
help like I
Please add the below CSS for the cart icon.
body .header__icon--cart .icon{
height:2.7rem;
width:2.7rem;
}
thanks