Hi ! im hoping someone may help. I would like my main menu font colours to be different . im so new to this and trying to figure out css etc so please be gentle. I think maybe black but other suggestions welcomed ! ty in advance.
Topic summary
Goal: change Shopify main menu font colors (ideally to black), with guidance for a CSS beginner.
Key solution (implemented):
- Edit theme CSS: Admin → Online store → Themes → Edit code → base.css.
- Add rules targeting .header__active-menu-item and .header__menu-item with color: black !important; then save and reload. Screenshots illustrate steps/results.
- Result: Main menu item text successfully changed to black (confirmed by the requester).
Follow-up request: set dropdown (submenu) headers to a different color than main headings (main = black, sub = another color).
- Provided update: add selector .mega-menu__link.link to the same CSS and set color: black !important; This specifically changes dropdown headers, but to black as shown.
Notes:
- CSS (Cascading Style Sheets) controls styling; !important forces the rule to override other styles.
- Images are supportive (showing where to edit and the outcome) but not essential to apply the fix.
Status/outcome:
- Main menu color change resolved.
- Dropdown header color targeting provided, but example sets them to black as well; the request for a different color remains implicitly open pending a chosen color and confirmation.
1 Like
Hi @xmelaniex
Would you mind to share your store URL? What color would be and all the menu you like to change color or just specific one?
Hi @xmelaniex
I have reviewed your requirement , I think you just need edit css script in base.css and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search base.css and add the script css custom font in the end of file:
.header__active-menu-item,
.header__menu-item {
color: black !important;
}
Step 3: Save and reload page in storefront.
=> The result:
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!
thats amazing thats worked ! now, is there a way i can change the headers of the dropdowns to another colour ? so the main headings will be black, then the sub headings another colour x
Hi @xmelaniex ,
I’m very pleased that my solution could help you.
For your new requirement, in this step 2 edit css in base.css, you just need to add the class .mega-menu__link.link to the custom CSS and save it again:
.header__active-menu-item,
.header__menu-item,
.mega-menu__link.link {
color: black !important;
}
And the result, you can change the headers of the dropdowns to black color.
If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!