Solved

Header & Mega Menu changes

bertoloo
Excursionist
22 0 6

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

 

Accepted Solutions (2)

AryavK
Trailblazer
219 9 29

This is an accepted solution.

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

faith&you

View solution in original post

yashgarg
Shopify Partner
102 26 32

This is an accepted solution.

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

 

yashgarg_0-1705158024123.png

 

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

Replies 4 (4)

AryavK
Trailblazer
219 9 29

This is an accepted solution.

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

faith&you
bertoloo
Excursionist
22 0 6

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

yashgarg
Shopify Partner
102 26 32

This is an accepted solution.

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

 

yashgarg_0-1705158024123.png

 

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
bertoloo
Excursionist
22 0 6

@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.

 

Screenshot 2024-01-13 at 18.55.31.pngScreenshot 2024-01-13 at 18.55.46.png