Shopify Menus: Uppercase, Lowercase, or Something In Between? You Decide!

Want your menu navigation text to look a certain way? Maybe you want it all in uppercase for a bold look, or perhaps lowercase for a more casual feel. You can achieve this easily with a little bit of magic called CSS! 

This guide will walk you through, step-by-step, how to use CSS to change the capitalization of your menu text. I’ll cover making it all uppercase, lowercase, or just the first letter of each word capitalized. I’ll even show you how to target specific parts of your menu, like the main menu or the dropdown menus.

Non-techie? No problem, I created this tutorial with you in mind! I’ll break it down into simple steps that anyone can follow NO MATTER WHAT THEME YOUR USING. So, let’s get started and give your Shopify store a fresh new look!✨

Want to watch the tutorial instead? Click 👇🏽

How to Change The Header Navigation Case Text In Shopify

STEP 1: FIND THE CUSTOM CSS SECTION

First things first, head on over to the dashboard and navigate to the custom CSS section. This is where the magic happens!

1. Log in to your Shopify admin dashboard.
2. Click on “Online Store” and then “Themes“.
3. Choose the theme you want to edit and click on “Customize“
4. Inside the Theme editor, select the Header section.
5. Scroll to the bottom to access “Custom CSS”

STEP 2: CHANGING THE TEXT CASE

Below you will find various CSS code snippets for you to copy and paste into the Custom CSS section to change the text cases and make your menu unique to your brand. Replace the text in bold to any of the 4 values you wish to use.

NOTE: The code below is specifically for any of the free Shopify themes. If your using a third party theme, see Finding the CSS Class for Your Theme.

Making your all menus uppercase (mobile and desktop):

/*desktop and mobile all nav uppercase*/
.header__inline-menu,
.list-menu {
  text-transform: uppercase;
}

Making Menus Uppercase on Desktop Only:
If you prefer to have uppercase text only on desktop and keep the original text case on mobile, copy and paste the code below and you’re good to go!

/*desktop only all nav uppercase*/
.header__inline-menu {
  text-transform: uppercase;
}

Making Top-Level Menus Uppercase:
Let’s say you want your top-level menu items to be all caps, but submenus to have the first letter capitalized. You can achieve this by combining code snippets:

/*top level nav uppercase*/
.header__inline-menu {
  text-transform: uppercase;
}.header__submenu {
  text-transform: capitalize;
}

STEP 3: SAVE AND PREVIEW

Save your changes and review the website’s front-end. Voila!

Change the Look and Feel: Text Case Options

CSS offers a few text transformation options not just uppercase. Feel free to experiment and achieve different effects by changing the property value within the curly braces { } of the CSS code.

• CSS Class (1): This is the class name that targets a particular element in your theme’s code. In this case, it targets the inline menu within the header section.

• Property (2) and Value (3):
  Here, it’s telling the targeted element to transform all text to uppercase.
  • none – It has a default value. It has no Capitalization.
  • capitalize – This capitalizes the first letter of each word, making the rest lowercase.
  • uppercase – This transforms all characters in each word to uppercase (ALL CAPS).
  • lowercase – This converts all characters in each word to lowercase.

Play around with these options to create the perfect look and feel for your Shopify store’s menus!

Pssssst…. You can 📌 pin this tutorial for reference to your Shopify Board on Pinterest! 👍🏽

Advanced Customization: Finding the CSS Class for Your Theme

Using a premium theme? Not to worry – you can still customize your menu navigation. I’ll show you how to find and modify the CSS code within your theme’s backend, giving you complete control over your website’s design.

If the codes above do not work for your theme it means your theme is using different class names. Which simply means the “.header__inline-menu” class on your theme can be called “.sit-nav” or something else. You can find the correct class for your specific theme by following these steps:

1. Go to the front-end of your Shopify store.
2. Right-click on your screen and select “Inspect“. This will open the developer tools in your browser.

3. In the developer tools, click on the element selector. It’s located on the top left hand corner.

4. Identify the class name. Hover over the navigation menu until the section is highlighted. The nav class name (nav is short for navigation) will be displayed right above it and the inspector tool box will also highlight the section.
   • See the example below: nav.header__inline-menu (appears above the navigation bar) and <nav class=”header__inline-menu“> (is highlighted in the inspect tool box).
   • Identify the class name for your theme.

5. Copy the class name and add it to your CSS code, following the same format as the examples in Step 2.

By following these steps, you can find the correct class name for your specific theme and customize your menu text case!

Adding the CSS to the Edit Code (Optional)

The custom CSS section has a limited character count. If you have other CSS code currently in this section, or would rather keep your code in the code editor, here’s how:

NOTE: It’s a good habit to create a duplicate copy of your theme and work in the duplicate copy when you are making changes to the theme’s code. If and when you are happy with the changes and they are not interfering with other code or Apps, you are then safe to add the code to the published site.

1. Copy the CSS code from the Custom CSS section.
2. Click on “Online Store” and then “Themes“.
3. Choose the theme you want to edit and click on the “…”, then select “Edit code“.
4. In the “Assets” folder, find the “base.css” file (or whichever file your theme uses for CSS, for example theme.scss).
5. Paste your code at the very bottom of the file.
6. Save your changes.
   

Woohoo! You’ve successfully transformed your menu navigation with CSS! Until next time.

YOU GOT THIS!
Betsy

FAQ’s

You May Be Interested In…

📖 On the Blog:
How to add Borders to Individual Elements/Blocks in Your Shopify Store
Shopify Layout: Hide Desktop Sections & Create Mobile-Only Sections with CSS

📺 On YouTube:
How to Add a Button to The Header Navigation | Shopify Tutorial
Resize ONLY the Text of the Rich Text Section
Change Your Header Menu Font Case in Shopify