Navigation bar styling - full background color instead of underline

Site URL: https://flounder-vanilla-a464.squarespace.com/

Hi all,

I'm having a tough time getting my navigation styling to work properly. 

I'm trying to get a background color to fill on hover, but no matter what I do, it only wants to underline rather than filling the full space. This is what I want it to look like:

The example below is what I'm getting. I also don't want the hover state of the topline menu options to apply to the folder items, since I already have hover styling set for those separately. I've tried canceling them out with :not, but can't get it to work properly. Here's what I'm trying to avoid:

Site: https://flounder-vanilla-a464.squarespace.com/

Pass: sqs123

You mean remove green or remove yellow?

13 hours ago, tuanphan said:

You mean remove green or remove yellow?

Remove the yellow from the folder dropdown hover state (it's supposed to only have the teal hover), keep the yellow on the top-level menu items hover (but make it fill more of the background like it does in the other example).

On 8/29/2022 at 5:32 AM, catsonearth said:

Remove the yellow from the folder dropdown hover state (it's supposed to only have the teal hover), keep the yellow on the top-level menu items hover (but make it fill more of the background like it does in the other example).

Don't remove any code in your current code

Add this to Design > Custom CSS

.header-nav-folder-item:hover a {
    background-color: #60aba4 !important;
}

2 hours ago, tuanphan said:

Don't remove any code in your current code

Add this to Design > Custom CSS

.header-nav-folder-item:hover a {
    background-color: #60aba4 !important;
}

 

Thanks @tuanphan - that helped fix the yellow highlight in the dropdown, but can you also help me with the hover background for the main topline menu items? 

Currently looks like this:

But I want it to look more like this:

I can't seem to change that background shape for some reason - I want it to fill the full space around the menu item, but it won't get any bigger than that.

Thanks!

Just wanted to bump this up, since I still haven't been successful in fixing the above issue.

On 9/10/2022 at 1:03 AM, catsonearth said:

Just wanted to bump this up, since I still haven't been successful in fixing the above issue.

Try this CSS

@media screen and (min-width: 992px) {
.header-nav-item {
    line-height: 1em !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
    top: unset !important
}}

On 9/10/2022 at 6:50 PM, tuanphan said:

Try this CSS

@media screen and (min-width: 992px) {
.header-nav-item {
    line-height: 1em !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
    top: unset !important
}}

 

Thanks @tuanphan. That helped a bit, but I'm still struggling with the left/right padding around the text to get the background shape correct. Here's what it looks like after adding your CSS:

How can I extend the background a bit to the left and right so there's some padding around the text? Adding padding directly to the hover state causes the menu items to change location slightly on hover, which I don't want to happen. Adding padding to the non-hover state just spaces them out more, but doesn't impact the width of the hover background at all.