Hello!
I am using the dawn theme and my URL is carcleansweden.se.
I would like to make the whole background of my dropdown menu the same color and make it wider so the first menu option fits on 1 row:
I would hugely appreciate the help!
Topic summary
Goal: adjust the Shopify Dawn theme’s header dropdown so its background is a single color and make it wide enough for the first menu item to fit on one line.
Actions taken:
- Advisor provided CSS to add in base.css (theme stylesheet) to set the dropdown’s width to “max-content”.
- After the user requested a white background, the advisor added “background: #fff” to the same selector.
Visual references:
- Screenshots show the dropdown width/background issue and later a gray text appearance on non-home pages.
New issue:
- On pages other than the home page, menu text appears gray when not selected; the user wants text to be consistently black.
- Advisor suggested a CSS rule in base.css to force paragraph text (p) to black using “!important”.
Notes:
- CSS (Cascading Style Sheets) controls the site’s visual styling; base.css is the main theme stylesheet.
Status:
- Dropdown width and background color have proposed fixes; user confirmed the desired white color.
- Text color fix is proposed but pending user confirmation. Discussion appears ongoing.
Go to your online store → edit code → base.css file and paste this code there
details[open]>.header__submenu {
width: max-content;
}
this will fix the width
please confirm which color you want for background
1 Like
I would like to have the entire background completely white. Thank you!
use this code for that
details[open]>.header__submenu {
width: max-content;
background: #fff;
}
1 Like
Thank you so much! I have one more question if you don’t mind. The text color is good on the home screen but for some reason its grey on the other pages when not selected:
Is it possible to have the text always completely black on all pages?
Thank you so much for your help!
you this code in your base.css file for that
p{
color:#000 !important;
}