Need to change menu font color and to make it bold - Debut theme

Solved

Theme: Debut

Url: https://zenpibble.com/

 

Hi all, can someone help me with this? I'm trying to change the font color to white and bold so it stand out more.

 

Any help appreciated! Thank you.

Capture.JPG

BigglyBoo | Cute socks, sandals, and shoes for cute babies.

0 Likes

Success.

Hi BigglyBoo,

 

Do you want to do this to all menu items or only some?

 

If you want to target only some menu items then you should find what you need in this thread: https://community.shopify.com/c/Technical-Q-A/Anyone-know-how-to-change-the-colour-of-one-title-SALE...

 

Note that I did try Bo's suggestion of adding <span> tags to the menu items but that doesn't seem to work for the Debut theme. If you want to take that approach you will need to edit your theme's 'header.liquid' file (Online store > Themes > Actions > Edit code > Sections > header.liquid) Within that file you will need to remove the 'escape' filter from all references to your menu items. For example {{ link.title | escape }} becomes {{ link.title }}, {{ childlink.title | escape }} becomes {{ childlink.title }}, {{ grandchildlink.title | escape }} becomes {{ grandchildlink.title }}. Alternatively, you could use the other approach that I suggested in that thread.

 

If instead you want to change all menu items you can add some css rules to the bottom of your 'theme.scss.liquid' file (Online store > Themes > Actions > Edit code > Assets > theme.scss.liquid):

.site-nav__link--active .site-nav__label {
  border-bottom-color: white;
}

.site-nav__link .site-nav__label {
  color: white;
}

I would also suggest that instead of 'white' you use 'rgba(255,255,255,0.85)'. It will provide a slight bit of transparency to your text so that it sits better on the background colour.

 

Hope that helps!

 

Regards,

Tom

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
0 Likes

Success.

Shopify Expert
2486 416 523

Hi  @BigglyBoo 

Add this css in asset->theme.scss file

.site-nav li a {font-weight: 600;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

@Jasoliya @LittleVentures Thanks guys, it worked!

 

@LittleVentures That's very interesting to know about changing the colour of one menu item. I'll save it for the future!

BigglyBoo | Cute socks, sandals, and shoes for cute babies.

0 Likes