HOW TO BOLD AND COLOR ONLY YOUR HEADER LINKS

Solved
Highlighted
Excursionist
12 0 2

Hey Guys,

 

New Shopify website designer here! I'm working in the Debut theme and wanting to do the following to my Header and Footer Navigation Menu(s):

  1. Bold the menu items, but not the other body text throughout the site (the Debut theme classifies the menu items as "body text")
  2. Change the color of the menu items, but not the other links throughout the site (the Debut theme classifies the menu items as "links", of course.)

I've looked through several similar posts and haven't yet found any solutions that work. Please assist with any strings of codes that you all know can work to make this minor change and please also let me know where to place it in my theme code files.

Thanks so much!

Marshaé

0 Likes
Highlighted
Shopify Partner
55 9 11

Hey, Can you share url of the site and if possible screenshot with items you want to bold items. 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted
Excursionist
12 0 2

Hi Robin,Screen Shot 2020-06-22 at 1.28.21 PM.png

Thanks for your reply! The URL is athelitepro.myshopify.com  and here's a screenshot of the header! I'd like to bold the menu items and change their color back to black. However, for the links that'll be within body text throughout the site, I'd like those to be able to remain in the color orange, if possible. I just don't want them to be orange in the header

1 Like
Highlighted
Excursionist
177 45 53

Hi, @marshaesmith 

Thanks Welcome to the Shopify community!
Your website is password procted. please share your passowrd.
So I will check and provide a solution here.

Thank you.

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Shopify Partner
4869 720 1555

@marshaesmith 

Thanks for details

can you please add code and chagne the value as you like.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-nav__label {
    font-weight: 600;
    color: #000000;
    font-size: 16px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
12 0 2

Sorry! Here's the password: offots

 

0 Likes
Highlighted
Excursionist
12 0 2

Hey There, this solution didn't work. I followed the instructions listen, but no luck. Anything you think I could possibly need to do differently?

0 Likes
Highlighted
Shopify Partner
55 9 11

Hi, 
Its simple, just edit code > theme.scss file 

add this code at the end 

.site-nav a span {
    font-weight: bold!Important;
    color:#000!Important
}

Let me know if this works for you.

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted
Shopify Partner
4869 720 1555

@marshaesmith 

Thanks for details.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-nav a {
    font-weight: 600;
    color: #ff6700;
}
.site-nav__link--active .site-nav__label {
    border-bottom-color: #ff6700;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
12 0 2

@KetanKumar 

That string of code messed up the entire website. Please see the attached screenshot and offer a solution. Thank You.

 

Screen Shot 2020-06-23 at 9.46.09 AM.png

0 Likes