FROM CACHE - en_header

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

Solved
Yugen
Explorer
67 2 13

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

Accepted Solutions (2)

Accepted Solutions
LittleVentures
Shopify Partner
45 10 10

This is an accepted solution.

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

View solution in original post

Jasoliya
Shopify Expert
4522 586 1136

This is an accepted solution.

Hi  @Yugen 

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.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 15 (15)
LittleVentures
Shopify Partner
45 10 10

This is an accepted solution.

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
Jasoliya
Shopify Expert
4522 586 1136

This is an accepted solution.

Hi  @Yugen 

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.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Yugen
Explorer
67 2 13

@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!

conesn22
New Member
1 0 0

I tried this code on my debut theme and unfortunately it didnt work. If anyone knows how to make the main menu (Home, Shop All, etc.) in bold let me know. I want to keep the same color and the same font...I just want it to be bold so it stands out a little more.

Jasoliya
Shopify Expert
4522 586 1136

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.site-nav a,.site-nav__link--button {font-weight: bold;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Proseoandhtml
New Member
5 0 0

How do I make my menu font bold on the wharehouse theme.

Jasoliya
Shopify Expert
4522 586 1136

Send me your store url

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Proseoandhtml
New Member
5 0 0

Its lampstogo .myshopify.com

andrenucci
Tourist
25 0 2
novisgallery
New Member
1 0 0

Easy to do. Works exactly as it should. Many thanks.

Emmalouise
Tourist
4 0 1

How do i Change the font colour of just the home page header and also the links on header for homepage

Jasoliya
Shopify Expert
4522 586 1136

Send your store url, and only want change for home page ? 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
anastasiakrs
New Member
10 0 0

Hi!

 

When I used the code to make the nav menu bold, it only made the normal menu items bold but not the ones that have drop down links. What do I do to make all of them bold?

Jasoliya
Shopify Expert
4522 586 1136

send me store url 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
anastasiakrs
New Member
10 0 0

I managed to sort the header navigation menu, but I'm struggling to do footer menu items.

 

I need INFORMATION and CUSTOMER CARE in the footer to be BOLD. But only those 2 headings. 

 

Shop - raisedinacircus.com

 

Let me know if you can help