Jump to content

Custom Navigation Header Request

Recommended Posts

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

 

NNGARAGE_mockup-01.png

NNGARAGE_mockup-02.png

NNGARAGE_mockup-03.png

Edited by jennifer8710
Link to comment
  • Replies 14
  • Views 639
  • Created
  • Last Reply

Top Posters In This Topic

Can you share the website URL too?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

 

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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"!

Link to comment

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

Link to comment

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!

Edited by jennifer8710
included bullet #2
Link to comment
.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... 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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. 😞

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.