How to Make a Menu Item Bold on Homescreen

Shopify Discussion

Topic summary

A user wants to make a specific menu item (“Farm & Ranch Supplies (NEW)”) appear bold in their Shopify store’s navigation menu.

Proposed Solutions:

Two respondents provided CSS code snippets to achieve this:

  • Both suggest adding custom CSS to the styles.css file
  • The code targets the navigation menu item class (.nav-item.drop-uber)
  • Key CSS property: font-weight: bold (or font-weight: 600)
  • One solution includes additional padding adjustments

Status: The discussion appears resolved with working code provided, though no confirmation from the original poster indicates whether the solution was successfully implemented. The responses contain some formatting issues but convey the technical approach clearly.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

In the Navigation menu, I would like to make the “Farm & Ranch Supplies (NEW)” menu item bold. Is there anyway to do that? I would appreciate any help you can provide.

Here is the website: https://hammanfarmandranch.com/

2

Add the below css to your styles.css file.

.main-nav .nav-item.drop-uber a {

font-weight: 600;

}

3

Hi @AMorris1 ,

You can add the below in styles.css code

.main-nav .nav-item.drop-uber {
    padding-right: 1em;
    font-weight: bold;
}