How can I center the mega menu and remove underlines in website design?

[bertoloo]

I’ve been researching the community for different solutions to build the website design I want.
Now I’ve reached an impasse and I’m not able to change it, that is, in the header, I want the mega menu to be centered, the logo and icons at the ends.

The mega menu, when I hover, the main menus are underlined, and the submenus too. I don’t want them underlined. And the background color I also want to change as well as the color when hovering.

I’ve been looking point by point in the base.css file to change it but I’m not succeeding.

Any suggestion?

Thank you in advance.

https://htiamoq0sxtfz8qu-72009384204.shopifypreview.com

[AryavK]

It Is TOO Simple @bertoloo

1. Go To Online Store < Themes < Edit Code < base.css

2. Add The Code At The Bottom Of The File

.header__active-menu-item {
text-decoration: none;
}
 
.header__menu-item:hover span {
text-decoration: none;
}

If My Reply helped you, PLEASE mark it as solution and give it a like.

Cheers

[yashgarg]

Hi @bertoloo ,

Please follow the following steps

1. Go to your online store and select Themes from left panel

2. Press 3 dots menu in center (on the left of Customize button) and then Edit Code

3. Open the file base.css (you can search for it)

Now let’s solve the issues one by one:

1. Centering the mega menu

1. In base.css, search for the following: “@media screen and (min-width: 990px) .header–middle-left” (without quotes, might be in different lines, so try different search variations)
2. In the properties for this selector you will see ‘grid-template-columns: auto auto 1fr’, either remove this line or replace ‘1fr’ with auto
3. Save the changes, and refresh your store to see them in effect

2. Removing underline when main menu items are hovered

1. In base.css, search for the following “.header__menu-item:hover span” (without quotes)
2. In the properties for this selector you will see ‘text-decoration: underline;’, remove this line
3. Save the changes, and refresh your store to see them in effect

3. Removing underline from submenu on hover

1. In component-mega-menu.css, search for the following “.mega-menu__link:hover, .mega-menu__link–active” (without quotes)
2. In the properties for this selector you will see ‘text-decoration: underline;’, remove this line
3. Save the changes, and refresh your store to see them in effect

4. Can you be more specific on what other background and color changes you are referring to on hover ?

Thanks

Yash Garg

[bertoloo]

I tried, but it doesn’t work. I don’t know why and I put this code days before.

[bertoloo]

@yashgarg it works! As for the background color I was referring to, it was the submenu background. At the moment it is white but I want it to be exactly the same color as the header.

And if you can help me with something else, I want to remove the arrows when hovering in the menu.