jennifer8710

15 minutes ago, Ziggy said:

Very strange, worked in my testing, I'll see if there's another solution for that. I don't know why Squarespace makes this so difficult to change!

Seriously! I hate the majority of the changes they've made recently 😞 

10 hours ago, Ziggy said:

.header-nav-item:hover {
  background:steelblue;
  a {
    color: #fff !important;
    background-image:none !important;
  }
}

That should help with the link colour and underline. The background colour active state is eluding me currently... 

That helped the link color! But like I mentioned before, the "background-image:none !important;" does NOT remove the underline. 😞

Could anyone else help me?

Still trying to figure out:

1. how to get rid of the underline on hover/active on the nav bar

2. how to get the background to stay on active state.

3. why I can't get the hover/active text color to change to white.

Thank you!

8 hours ago, Ziggy said:

@jennifer8710 Here's some more CSS for you, hopefully this helps you in the right direction!

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
    padding-left: 12px;
    padding-right: 12px;
    min-width: 20vw;
}
.header-nav-item {
  transition:ease-in-out 300ms;
}
.header-nav-item:hover {
  background:steelblue;
}
.header-nav-item .header-nav-item--collection .header-nav-item--active {
  background:steelblue;
}

 

Looking pretty good!! Thank you - I adjusted some margins/ paddings to get the look I was going for...

However, the Active state is not sticking (the background color)... and I also can't get the text to turn white on hover & active for some reason.

Finally, that underline is still there - background-image:none doesn't work for getting rid of that line in the nav bar.

14 minutes ago, Ziggy said:

Yes, best to place that CSS in a media query:

@media only screen and (min-width:768px) {
.header .header-announcement-bar-wrapper {
  padding-bottom: 0vw;
  padding-left: 0vw;
  padding-right: 0vw;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 0 100%;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
  background-color:#777777;
}
.header-nav-item--active a, .header-nav-item a {
   background-image: none !important;
}
}

Better?

YES! Beautiful. Thank you.... now if only that damn underline would go away with "background-image: none"!

ALSO, now the mobile header is way off. Only the logo shows, and it's not where it's supposed to be, and the navigation menu icon is gone.

4 hours ago, Ziggy said:

Going to take a bit of CSS, this gets you started on getting the navigation bar full width and removing the navigation underline:

.header .header-announcement-bar-wrapper {
  padding-bottom: 0vw;
  padding-left: 0vw;
  padding-right: 0vw;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 0 100%;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
  background-color:#777777;
}
.header-nav-item--active a, .header-nav-item a {
   background-image: none;
}

 

 

Yes that's lovely! Thank you - the only thing is, that "background-image: none;" has NOT been working. It still is showing the animated underline.

4 hours ago, Ziggy said:

Can you share the website URL too?

Updated the question! www.nngarage.com / pw: nngarage2020

Hello!

I've got a custom navigation request from a client... I've mocked up what I'd like to do:

1. Remove the current animated underline on the navigation hover / active. (I found code to do this but it is NOT working for some reason!)

2. On hover & active states, I'd love to do a large width background change / text color change.

3. I'd love the navigation bar area to be full width & have a light gray background.

4. Because of the width of the nav bar, I think I'd like Tablet size to follow the Mobile nav bar instead of Desktop.

See mockups attached.

I know some CSS but not enough to make this happen....

Thank you so much in advance for your help!

www.nngarage.com

pw: nngarage2020