Change menu text style, size and color - SENSE

Store Design
, ,

Topic summary

A user wants to replicate the menu text styling and colors from another Shopify site onto their Sense theme.

Solution Provided:
Another user shared CSS code to achieve this customization:

  • Navigate to Online Store → Themes → Edit code → Assets → theme.css
  • Add custom CSS at the bottom of the file

Key CSS modifications include:

  • Adjusting navigation container width (70%)
  • Setting header background color (#00C43F)
  • Changing text color to white
  • Applying font family (“Shopify Sans”, sans-serif) and size (15px)

Initial Issue:
The first code snippet had formatting errors. After clarification about which file to edit (Base.css), a corrected version was provided with the complete styling code to match the reference site’s appearance.

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

Hey guys! Is it possible to get the same menu text and colors as this shopify page on my Sense theme? Anyone know how I do that?

Ask2Shopify.png

Site: Brush Up

1 Like
2

Hi, @MrKingstone .

Hope everything is well!

Screen Shot 2023-01-12 at 1.52.52 PM.png
Screen Shot 2023-01-12 at 1.52.52 PM.png2880Ă—924 256 KB

/** This is just to adjust the width of your navigation container **/
.nav-container-menu {
    flex: 0 0 70%;
}

/** Color of background header bar **/
.site-header {
    background: #004C3F !important;
}

/** Color of text **/
.site-header a, .site-header span {
    color: white !important; 
}

To add this to your style file

  1. Go to Online Store → Theme → Edit code
  2. Asset → /theme**.scss** → paste below code at the bottom of the file.
1 Like
3

Nothing happened. You mean in Base.css right? And do you also know how do i get the same font-style & size in menu or is that also in the code?

4

Sorry, @MrKingstone .

My mistake, yes in Base.css pase the following to get the exact same style:

/** This is just to adjust the width of your navigation container **/
.nav-container-menu {
    flex: 0 0 70%;
}

/** Color of background header bar **/
.site-header {
    background: #004C3F !important;
}

/** Color of text **/
.site-header a, .site-header span {
    color: white !important; 
}

/** Font Size & Family **/
.site-header a {
    font-family: "Shopify Sans",sans-serif;
    font-size: 15px;
}