When I customise my theme and view my live website homepage, ‘track my order’ always seems to be underlined for some reason:
How can I stop this from happening, as well as how do I remove that underline feature altogether, and instead maybe have it turn bold instead? Thanks
Use the following CSS to remove the underline from the menus:
.header__menu-item:hover span {
text-decoration: none;
font-weight: 600;
}
whereabouts do i paste this CSS?
Sorry, I edited my reply to include the css to make the menu items bold instead of underlined. If it doesn’t work, I would need to see your site to see the exact css that I would need to change for the “Track Your Order” menu item
Head on over to Customize Theme > Left side, click the Gear Icon (Theme Settings) > Scroll down to the “Custom CSS” Section and place the code there.
I used that CSS but I’m not a fan of how the bold shifts all the other words in the mega menu, so I’m just looking to get rid of the underline on track your order, and only underline whatever is being hovered over/clicked on.
Also I just spotted this now when I clicked ‘Wall’, see below
Any way to fix these weird errors? Whats the best way for you to have a look at this please? Thanks
It seems like your theme version might be different than the one I have downloaded. I might need to see your site to inspect it for the correct CSS.
My site: opulencelighting.com
Thanks
The issue you’re experiencing with the menu links appearing ‘active’ on your Shopify site is due to all links directing to the same URL. When multiple links point to the same page (e.g., “Shop All,” “Wall,” “Ceiling” all leading to the collections page), they all become ‘active’ when you’re on that page. Similarly, the “Track Your Order” link points to the homepage, so it shows as ‘active’ there. To fix this, assign unique URLs to each menu item. After updating the links to point to their respective pages, the ‘active’ state should only show for the correct page. You might still need to adjust the CSS for appearance, but this should resolve the main issue of multiple active menu items.
So basically, make sure each link points to a unique location on your site, and then this issue should resolve itself. For dev purposes, you can set the links to “#” which will not set active on any links.
Hi @kevinbarry0
Do you like to remove all the underline in the nav menu? if it is check this one.
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:
.header__menu-item:hover span {
text-decoration: none !important;
}
details[open] > .header__menu-item, .header__active-menu-item {
text-decoration: none !important;
}
And Save.
If you like to bold the menu check this one.
Same Instruction.
nav.header__inline-menu a {
font-weight: 900;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Ahh makes sense! Thanks for all the help!
Thanks for that!
In regards to adding bold to the mega menu, I see that it made the entire menu bold even before hovering/clicking. I like the bold effect but I prefer the look of the mega menu before it turned everything slightly darker, is there a way to only make it bold once hovering/clicking?
Use this code, you can change the 600 to a higher number(by the 100s: 400,500,600,700) for bolder text. a higher number is more bold.
.header__menu-item:hover span {
text-decoration: none;
font-weight: 600;
}
Thank you 
Yes, check this one.
Same Instruction.
nav.header__inline-menu a:hover, nav.header__inline-menu a:active {
font-weight: 600;
}
nav.header__inline-menu a {
transition: font-weight 0.3s ease-in-out;
cursor: pointer;
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!