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

[bcfoodieguy]

 

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.

 

[codexecom]

Can you please share website link

[bcfoodieguy]

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

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

 

[bcfoodieguy]

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]

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!

[bcfoodieguy]

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

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

[codexecom]

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%;
}

[Made4uo-Ribe]

Its already solve?

[bcfoodieguy]

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]

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:
• 

[bcfoodieguy]

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]

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 · 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:

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

[bcfoodieguy]

That worked, thank you so much!