Dawn Theme: Capitalise Main Menu Items & Footer Menu Items

Store Design
, , , ,

Topic summary

A user seeks to capitalize menu text in Shopify’s Dawn theme for both header and footer navigation items.

Solution Provided:
Add CSS code to base.css or section-footer.css:

  • For header: .header__menu-item { text-transform: uppercase !important; }
  • For footer: .footer-block__details-content a { text-transform: uppercase !important; }

The original poster confirmed this solution works.

Follow-up Issues:

  • One user wants title case (capitalize first letter only) instead of all uppercase. Suggested fix: change uppercase to capitalize in the CSS.
  • Another user reports the CSS affects dropdown menus unintentionally and seeks to isolate changes to only the main header menu.
  • A third user has the same dropdown issue and wants normal text for submenu items while keeping the main menu capitalized.

Status: The basic capitalization solution is resolved, but refinements for selective application (avoiding dropdowns) and alternative casing styles remain open questions.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am using Dawn theme and I would like to capitalise the text for Header Menu Items and Footer Menu Items.

Image below shows Main Menu and nested drop-down menu items, I’d like these all to be capitalised.

Screenshot 2022-11-30 at 10.42.33.png
Screenshot 2022-11-30 at 10.42.33.png529×291 33.2 KB

Footer Menu - I would like all footer menu list items to be capitalised:

Screenshot 2022-11-30 at 10.46.41.png
Screenshot 2022-11-30 at 10.46.41.png171×307 3.13 KB

2

I can do this if you want to!

3

Hello @Scotch_Eggs

Add this CSS below of Online Store >> Edit Code >> Assets >> base.css

.header__menu-item {
text-transform: uppercase !important;
}
.footer-block__details-content a {
text-transform: uppercase !important;
}

4

Thanks very much @MandasaTech - this worked great.

I paste the footer menu CSS into: section.footer.css / not the base.css

.footer-block__details-content a {
text-transform: uppercase !important;
}

1 Like
5

I wasn’t OP, but this solution worked perfectly for all lowercase. Can you help code it to capitalize the first letter in every word and leave the rest lowercase?

Or code it so the text is displays how it is inputted into shopify (to follow capitals, lowercases etc how it was typed in)? I need each word to have a capital first letter, but lower case rest. like this:

Shop

About

Customer Service

Thx in advance! Your solution worked perfectly for all lowercase.

6

instead of text-transform: uppercase, try text-transform: capitalize

7

its affecting the drop down menu now, how do I isolate the all caps to just the header menu? thanks

8

Same here.. Would like teh header menu in capslock but the items normal. any solution? Thank you