Header & menu

Technical Q&A

Topic summary

A user needs to customize header elements across different screen sizes:

Desktop requirements:

  • Resize and slim down header icons

Mobile requirements:

  • Reduce hamburger menu and icon sizes
  • Adjust font size in menu windows

Solution provided:
For the Dawn theme, add custom CSS code to base.css file:

  • Sets header icons to 3rem dimensions
  • Reduces inner icon size to 1.5rem
  • Adjusts menu drawer font to 1.4rem

The solution involves accessing Shopify Admin → Online Store → Themes → Edit code, then inserting the provided CSS snippet. For themes other than Dawn, the user is asked to share their store URL and password for customized assistance.

Status: Solution offered, awaiting confirmation if it resolves the issue.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I need to modify my header

For desktop I need to resize icons and make them smaller and thinner if possible

For mobile I need to resize hamburger icon and other icons to make them smaller and for the windows that open with the menu I need to resize the font.

Thank you in advance!

2

Hello @sosober

For the Dawn theme, follow the below steps, and if you want to do this in another theme, then please share the URL and password of your store.

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

.header .header__icon, .header__icon--cart .icon {
    height: 3rem !important;
    width: 3rem !important;
}
.header .header__icon .icon{   
    height: 1.5rem;
    width: 1.5rem;
}
.header header-drawer .menu-drawer__menu-item {
    font-size: 1.4rem;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.