How to add background for menu bar,
I want to add pink background behind my menu bar. Header should be white as it is but different background colour for menu.
Topic summary
Goal: set a distinct background color behind the navigation menu while keeping the overall header white on a Shopify store. A store link and a screenshot were provided for context.
Proposed solution: add custom CSS in theme.css or base.css. Apply a linear-gradient background to the main header wrapper to create a colored band (e.g., pink) for the first 60px, then transparent below. Also set the inline menu’s background to transparent so only the colored band shows behind the menu.
Key details:
- Edit selectors: header.main-header.main-header__container .main-header__wrapper and its child .header__inline-menu.desktop-only.
- Use linear-gradient at 0deg with the chosen color up to 60px, then transparent.
- Replace the example color with the desired color code.
Status: no confirmation from the requester; outcome not yet verified. The CSS snippet is central to the solution.
Hi @hem0903
You change just add this CSS in your theme.css/ Base.css
header.main-header.main-header__container .main-header__wrapper { background: linear-gradient(0deg, pink 60px, transparent 60px);}
header.main-header.main-header__container .main-header__wrapper .header__inline-menu.desktop-only { background: transparent !important; }
Replace the word pink with the color code you want there.
If This Solution work Kindly Like This and Mark it As a Solution