Add Line under Main category Desktop Menu

[Luxurymrkt]

Hi,

Id like to add a line/border below my main desktop categories. Like SHOP BY CATEGORY - LINE UNDER-  My site is https://vazluxe.com

[Dotsquares]

Hi @Luxurymrkt Thanks for reaching out to the community. 

In the theme file go to edit code and in the bottom of the CSS file use the following code-

.site-nav {
border-bottom: 2px solid #000; /* Adjust thickness and color */
padding-bottom: 5px; /* Adds spacing */
}

If the theme uses a different class , use this css--

.navbar, .header__menu {
border-bottom: 2px solid #000 !important;
}

Let me know if this works for you.

[Ecomify1]

To add a border below your main desktop categories on your Shopify store, simply go to your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code, open your CSS file (typically theme.scss.liquid or styles.scss.liquid under the Assets folder), and then add the appropriate CSS code (such as .main-category-class { border-bottom: 2px solid #000000; padding-bottom: 10px; }), replacing .main-category-class with the actual class or ID for your category section (which you can identify using your browser's inspect tool), then save the changes and refresh your store to see the new border appear below the categories.

[simontomkins]

Hey Luxurymrkt!

This should be possible with some custom CSS. Try adding the following:

.meganav__nav h4 {
	position: relative;
}

.meganav__nav h4:after {
	content: "";
	height: 1px;
	width: 100%;
	background: #e2e2e2;
	position: absolute;
	bottom: 0px;
	left: -20px;
	display: block;
	margin-bottom: -5px;
}

Go to Shopify Admin → Online Store → Themes → Customize → Theme settings. Add the CSS to the Custom CSS section and click Save.

Hopefully that works!