How can I bold a specific menu item in my main theme?

Solved

How can I bold a specific menu item in my main theme?

bcfoodieguy
Excursionist
13 0 6

Screen Shot 2023-10-20 at 10.33.03 AM.png

I'm trying to bold a specific menu item in my main menu. I knew how to do this in the Spotlight Theme, but not in the current theme (rhymes with barehouse). Shopify won't let me say the true name for some reason. I'm assuming the necessary CSS would go in the theme.css file, but I don't know what class or id to call out. Above is the code I've tried.

Screen Shot 2023-10-18 at 10.23.56 AM.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6961 1655 2038

This is an accepted solution.

Try this one. 

 

#shopify-section-sections--21306043498792__header > section > nav > div > div > ul > li:nth-child(1) > a {
    font-weight: 700;
    color: #ed6e0f;
}

 

And Save. 

Result:

Made4uoRibe_0-1699468982787.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 13 (13)

codexecom
Shopify Partner
57 9 13

Can you please share website link

Need Freelance Shopify Developer, Designer or For further Discussion
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I
bcfoodieguy
Excursionist
13 0 6

Unfortunately not, because I still haven't flipped the switch for this theme.

 

But here's the code I think would be useful:

Screen Shot 2023-10-20 at 10.50.00 AM.png

bcfoodieguy
Excursionist
13 0 6

Hello! I've finally launched this new theme. I've figured out bolding the "Sale" line item on Mobile with the following css:
#mobile-menu > div > div:nth-child(1) > div:nth-child(1) > ul > li:nth-child(5) {
font-weight: 700;
color: #ed6e0f;
}

However I cannot get something similar to work on desktop. Any ideas? Here's the live store: https://backcountryfoodie.myshopify.com/

Made4uo-Ribe
Shopify Partner
6961 1655 2038

Hi @bcfoodieguy 

Did you try to call using the :nth-child pseudo-class? Would you mind to share even the preview? Cause its hard to tell which selector this item belong. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
bcfoodieguy
Excursionist
13 0 6

I did. Couldn't get that to work either 😕 Here's the link: 

https://backcountryfoodie.myshopify.com/?_ab=0&_fd=0&_sc=1

codexecom
Shopify Partner
57 9 13

Hey @bcfoodieguy try this code on footer.liquid file

footer.footer {
position: relative;
margin-top: 105px !important;
}

footer.footer::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
min-height: 240px;
max-height: 240px;
background: url(https://cdn.shopify.com/s/files/1/0023/7427/1029/files/Intersect.png?v=1691057355);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
margin-top: 0px;
background-size: 100%;
bottom: 99%;
}

codexecom_0-1697829609424.png

 

Need Freelance Shopify Developer, Designer or For further Discussion
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I
Made4uo-Ribe
Shopify Partner
6961 1655 2038

Its already solve?

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
bcfoodieguy
Excursionist
13 0 6

Not solved yet. Trying to highlight the "Sale" menu item orange and bold. Works on our current theme (spotlight), but not on the new theme that isn't live yet (warehouse).

Made4uo-Ribe
Shopify Partner
6961 1655 2038

Oh, I see. I try to the demo store for warehouse just check if its working if not then it would require the URL website for the warehouse, even just the preview. Thanks!

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

#shopify-section-header > section > nav > div > div > ul > li:nth-child(3), 
#mobile-menu > div > div:nth-child(1) > div:nth-child(1) > ul > li:nth-child(3) {
    font-weight: 700;
    color: #ed6e0f;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1697831296476.png
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
bcfoodieguy
Excursionist
13 0 6

Unfortunately that didn't work. I'll just hold off for now and once we switch themes I'll circle back so we can figure out works. Thanks!

bcfoodieguy
Excursionist
13 0 6

Hello! I've finally launched this new theme. I've figured out bolding the "Sale" line item on Mobile with the following css:
#mobile-menu > div > div:nth-child(1) > div:nth-child(1) > ul > li:nth-child(5) {
font-weight: 700;
color: #ed6e0f;
}

However I cannot get something similar to work on desktop. Any ideas? Here's the live store: https://backcountryfoodie.myshopify.com/


Made4uo-Ribe
Shopify Partner
6961 1655 2038

This is an accepted solution.

Try this one. 

 

#shopify-section-sections--21306043498792__header > section > nav > div > div > ul > li:nth-child(1) > a {
    font-weight: 700;
    color: #ed6e0f;
}

 

And Save. 

Result:

Made4uoRibe_0-1699468982787.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
bcfoodieguy
Excursionist
13 0 6

That worked, thank you so much!