Make header menus bigger - desktop

[ads18922]

hello, i would like to increase the size of my header menus on desktop:

my store is https://geg0hdxyqggohnfo-90984481091.shopifypreview.com , theme is horizon

[vm-web]

@ads18922

1. Go to your theme code editor:

   • Shopify Admin → Online Store → Themes

   • Find your Horizon theme → Actions → Edit code

2. Open the CSS file:

   • Look for assets/base.css, assets/theme.css, or assets/style.css (name may vary depending on the theme).

3. Add custom CSS at the end of the file:

   • Scroll to the very bottom and paste this code:

   /* Increase header menu link size - desktop only */
   @media screen and (min-width: 1024px) {
     .site-header .header__inline-menu a {
       font-size: 18px !important; /* Increase this value as needed */
       padding: 0 15px; /* Optional: give more spacing between menu items */
     }
   }
   
   

4. Save the file.

5. Preview your store on a desktop screen to check the new menu size.

---

Thanks!

[Dan-From-Ryviu]

Hi @ads18922

You can do that by adding this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings

@media (min-width: 750px) {
    .menu-list__link {
        font-size: 1rem !important;
    }
}

Best regards,

Dan from Ryviu: Reviews & QA

[topnewyork]

Hi @ads18922,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 768px) {
  .site-nav__link {
    font-size: 18px !important;
    font-weight: 500;
  }
}

Thanks!