Menu Style

Store Design
, , ,
1

My current menu is too bold and even sub menu items are bold. Also they get underlined on selection.

https://goaadya.com

I need the same menu font as https://Suta.in or https://www.amrapaliboutique.in/

No bold and little bit better sleek font than what I have and also no underlining

2

Hi @Aadya

  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(min-width:990px){
.header__menu-item {
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}
summary.list-menu__item span {
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}
.header__active-menu-item {
    text-decoration: none !important;   
}
}

Result:

websensepro_1-1735626566050.png
websensepro_1-1735626566050.png1334×553 412 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

3

Hello, @Aadya

  1. Go to Online Store >> Theme >> Edit code.
  1. Open your theme.css / based.css file and paste the code in the bottom of the file.
ul.list-menu.list-menu--inline>li>a, #HeaderMenu-saree>span, #HeaderMenu-kurti>span {
        font-size: 15px;
        font-weight: 500 !important;
    }

Thanks!

4 
ul.list-menu.list-menu--inline>li>a, #HeaderMenu-saree>span, #HeaderMenu-kurti>span {
   font-weight: 500;
}
.list-menu {
   font-weight: normal;
}

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code.

  2. Open the base.cssfile under the Assets folder.

  3. Add this CSS at the bottom of the file:

This will change the font size of your menu items.

5

Hello @Aadya

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media only screen and (min-width: 990px) {
ul.list-menu.list-menu--inline > li > a, #HeaderMenu-kurti > span {
font-weight: normal !important;
}
.list-menu.list-menu--inline {
margin-left: 15rem !important;
}
.header__icons.header__icons--localization.header-localization {
margin-right: -10rem !important;
}
.header--middle-left .header__heading-link, .header--top-left .header__heading-link {
margin-left: -10.75rem !important;
}
.list-menu {
padding-left: 11rem !important;
}
}

Thanks

6

Thanks. It worked like a charm. Need one more help.

If you hove the blouse menu or any other menu that has sub menu, width of sub menu is smaller. Hence texts are getting wrapped. Can we do anything about that