Solved

Not able to bold a specific menu item

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
5069 1206 1470

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 13 (13)

codexecom
Shopify Partner
55 9 12

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
5069 1206 1470

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


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
55 9 12

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
5069 1206 1470

Its already solve?

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


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
5069 1206 1470

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
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


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
5069 1206 1470

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


bcfoodieguy
Excursionist
13 0 6

That worked, thank you so much!