Custom Navigation Header Request

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

Can you share the website URL too?

4 hours ago, Ziggy said:

Can you share the website URL too?

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

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;
}

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.

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.

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?

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"!

@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;
}

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.

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!

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

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

57 minutes ago, jennifer8710 said:

the "background-image:none !important;" does NOT remove the underline.

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!

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 😞