How to change font size of header items and remove underlines from menu item

Shopify Discussion

Topic summary

Goal: reduce header menu font size and remove underlines in a Shopify theme, matching a provided screenshot, and optionally add text labels for search and cart icons.

Recent updates:

  • Store URL and access were requested; the first password was invalid, then a working password was shared.
  • A contributor provided a concrete CSS-based solution with step-by-step theme editing instructions.

Proposed fix (CSS changes in base.css/style.css/theme.css):

  • Use a desktop-only media query (min-width: 989px) to set smaller font size on header menu items and remove underline on hover.
  • Add pseudo-elements (:before) to display “SEARCH” and “CART” labels next to the respective icons, with matching font size and spacing.
  • Remove text decoration from general link selectors (.link, .customer a) to eliminate underlines.

Technical notes:

  • CSS media queries target desktop layouts.
  • Pseudo-elements (:before) insert text content without changing HTML.

Outcome and status:

  • A result screenshot was shared showing the updated header styling.
  • No explicit confirmation from the requester yet; solution appears ready, pending acknowledgment.
Summarized with AI on January 19. AI used: gpt-5.
1

I want to change the header to something like this with small fonts. could someone please help me with the code ?

Screenshot 2023-09-05 at 7.24.35 PM.png
Screenshot 2023-09-05 at 7.24.35 PM.png2850Ă—268 252 KB

2

share your store URL

3

https://6375f5-2.myshopify.com/
password : Getlost.12

4

wrong password

RockTechnolabs_0-1693922885364.png
RockTechnolabs_0-1693922885364.png694Ă—311 9.52 KB

5

Hi @shopekaja

Would you mind to share your Store URL website? with password if its protected. Thanks!

6

lahwhe

this is the password

7

https://6375f5-2.myshopify.com/
pw : lahwhe

1 Like
8

Thank you for the information. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 989px){
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu span { 
    font-size: 16px !important
}
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu span:hover {
    text-decoration: none !important;
}

.header__icon--search:before {
    content: "SEARCH";
    font-size: 16px;
}
.header__icon--cart:before {
    content: "CART";
    font-size: 16px;
    padding-left: 20px;
}
.link, .customer a {
    text-decoration: none;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!