Remove line in header and expand box on hover

Highlighted
Pathfinder
85 3 11

Hi all,

I want to remove the line underneath the menu item in the header when hovered over. I also want to expand the box surrounding the menu item on hover, so it is the size of Amazon's box (see the header of Amazon.com). Please see the image below.

Screenshot 2020-09-18 092204.png

This is my website.

0 Likes
Shopify Partner
674 110 152

Hello @TechSolver,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

.header a:hover {
outline: 0px solid black !important;
}
.header-navigation-link.header-navigation-current:after{
background-color:#fff !important;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
Pathfinder
85 3 11

Thanks, but I want the exact opposite of what you did.

 

Now the box around the text is removed, (I wanted to make it bigger), and the line on the bottom shows (I wanted it removed).

0 Likes
Highlighted
Shopify Partner
674 110 152

@TechSolver,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

.header a:hover {
outline-offset: 10px;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
Pathfinder
85 3 11

And what about removing the line?

 

Also, the box has an effect that makes it bigger when hovered over. How do I turn that off?

 

And also how do I exclude the logo from the outline-offset because the box is bigger than the logo?

0 Likes