How can I change a header word color to red?

Store Design

Topic summary

A user wants to change the color of a specific word in their store’s header to red.

Solution provided:

  • Navigate to Themes → Edit code → Assets → base.css
  • Add CSS targeting the last menu item in the header’s inline menu
  • Use .header__inline-menu .list-menu--inline > li:last-child selector with color: red and background: orange properties

Follow-up issue:
The initial CSS solution doesn’t work on mobile view.

Mobile fix:
Additional CSS code provided targeting .menu-drawer__menu > li:last-child with similar color properties to address the mobile display issue.

The discussion includes code snippets that are central to implementing the solution for both desktop and mobile views.

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

Hi, i like to change in the header a word color in red, how can i do it?

header.png
header.png3022×308 28.3 KB

www.itaworld.eu

1 Like
2

Hi @itaworld
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.header__inline-menu .list-menu--inline > li:last-child {
  background: red;
}
.header__inline-menu .list-menu--inline > li:last-child .link--text{
  color: orange;
}
1 Like
3

it doesn’t change on mobile version

4

To change for the mobile view

.menu-drawer__menu > li:last-child {
  background: red;
}
.menu-drawer__menu > li:last-child .link--text{
  color: orange;
}