Jump to content

Navigation bar styling - full background color instead of underline

Recommended Posts

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:

nav-menu.JPG.26ab2b04db1e3c15c9ca7e8687384d06.JPG

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:

nav-menu-current.png.46fa82011b16ceaf8ebbd74508fb4de8.png

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

Pass: sqs123

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

13 hours ago, tuanphan said:

You mean remove green or remove yellow?

nav-menu-current.png.46fa82011b16ceaf8ebbd74508fb4de8.png

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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:

1233017641_Screenshot2022-08-30101508.png.c32958e386530819dceaa2048bf7768b.png

But I want it to look more like this:

1235267270_Screenshot2022-08-30101441.png.a7244bacf861f02695f98010c2197540.png

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!

Link to comment
  • 2 weeks later...
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
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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:

1968904192_Screenshot2022-09-12174440.png.d5e02b884bf5b60a9fbfcda7b5f8be27.png

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.