Remove line in header and expand box on hover

[TechSolver]

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.

This is my website.

[Wahab_Ahmad]

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

[TechSolver]

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

[Wahab_Ahmad]

@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

[TechSolver]

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?