Added new menu item, font not the same

[justateese]

I recently added 2 new menu items (little luxe and men’s collection) to my drop down list on my menu and I can not figure out how to change the font of those 2 to match the other options

[Moeed]

Hey @justateese

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[justateese]

I dont see them.css will theme.liquid work?

[justateese]

and where on theme.liquid do I add that above^?

[Enon]

Go to Online Store > Themes > Edit code > theme.liquid. Scroll to the very bottom and add the CSS just before the closing tag:

.your-menu-class { font-family: inherit; font-size: inherit; color: inherit; }

Replace .your-menu-class with the specific class for “Little Luxe” and “Men’s Collection” if they have one.

[justateese]

still didnt work

[justateese]

also the very bottom of mine isn’t , it’s

[rajweb]

Hey @justateese ,

To match the font style of “Little Luxe” and “Men’s Collection” with the other items in your menu, you’ll want to look at the CSS for the dropdown menu and see if there’s a specific class or style applied to the other menu items that isn’t applied to these two new items.

Here’s what you can check and adjust:

1. Inspect the Elements: Right-click on “Little Luxe” or “Men’s Collection” in your browser and select “Inspect” (or “Inspect Element”) to open the developer tools. Look at the classes or styles applied to these two items and compare them with the other menu items.

2. CSS Update: Once you identify any missing classes or specific CSS properties, you can update your CSS to ensure consistency. For instance, if all other items have a specific font style, color, or weight set in a class (e.g., .menu-item), ensure that “Little Luxe” and “Men’s Collection” also have that class or style applied.

3. Example CSS Fix: If you want to manually set the style, you could add CSS like this:

.menu-item {
    font-family: "Your Font Name"; /* Replace with your actual font name */
    font-size: 16px; /* Match the size used for other items */
    color: #desired-color; /* Match the color */
    font-weight: normal; /* Ensure it matches other items */
}

/* Specific selectors for Little Luxe and Men's Collection if needed */
.menu-item.little-luxe,
.menu-item.mens-collection {
    font-family: "Your Font Name";
    font-size: 16px;
    color: #desired-color;
    font-weight: normal;
}

Apply Classes in HTML: Make sure that “Little Luxe” and “Men’s Collection” have the .menu-item class (or the relevant class for styling) in your HTML markup.

If you still need help identifying the specific style, feel free to share more details about your CSS or HTML structure, and I can help you further

If I was able to help you, please don’t forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[justateese]

I tried what everyone offered below and still cant get it.

https://58xrwp-jy.myshopify.com/

staish

[Moeed]

Hey @justateese

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[justateese]

Thank you so much!!!

[Moeed]

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.