Jump to content

Trouble with sticky horizontal content nav bar

Go to solution Solved by Ziggy,

Recommended Posts

Once again the internet has tricked me into believing I can add "simple" custom code to my site to create a horizontal content nav for my case study. https://www.beatrizcaraballo.com/blog/sticky-content-navigation-squarespace

I followed this tutorial ^ though video is a walkthrough for Brine, the blog gave custom code for 7.1 that did make the section sticky but none of the formatting/style was changed. My anchor links remain stacked and unsightly. It is quite rude. https://duck-sheep-gyj3.squarespace.com/ /SD$$$2023

Can someone take a look at where I went wrong? I would like the anchor links to stick horizontally centered in the middle like in the video. Pls help. The section is sticky but it is also tacky 😞

 

Screen Shot 2023-09-21 at 6.04.33 AM.png

Link to comment

I don't think you've been tricked. I think the thing that you didn't follow in the instructions was the way that the text links were added to the section, in the video they are all in a single text block, and you have added them each in individual text blocks. Can you fix that and check if that solves the issue you have?

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Ziggy said:

I don't think you've been tricked. I think the thing that you didn't follow in the instructions was the way that the text links were added to the section, in the video they are all in a single text block, and you have added them each in individual text blocks. Can you fix that and check if that solves the issue you have?

Hi Ziggy! Thanks for your comment, I was wondering why my setup looked different from the video, I figured it was a brine thing. 

I added the anchor links to one text block as suggested and the issue persists, the content is still stacked 😞

Link to comment

It worked just fine when I test it, did you use the correct piece of code there are 4 different ones available? One leaves the links stacked and one makes them display horizontally. i.e. Do you have this code in your Custom CSS:

section[data-section-id="650b27611a98ab7b6b894352"]  .html-block p {
  display: inline-block;
  margin: 0 20px;
}

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
12 hours ago, Ziggy said:

It worked just fine when I test it, did you use the correct piece of code there are 4 different ones available? One leaves the links stacked and one makes them display horizontally. i.e. Do you have this code in your Custom CSS:

section[data-section-id="650b27611a98ab7b6b894352"]  .html-block p {
  display: inline-block;
  margin: 0 20px;
}

Hi Ziggy thanks for testing this on your end. I am still trying to get to the bottom of this issue. This is the code that I am using and my links are still stacked:

//HORIZONTAL CONTENT NAV//


[data-section-id="650b27611a98ab7b6b894352"]html-block p {
  display: inline-block;
  margin: 0 20px;
}

[data-section-id="650b27611a98ab7b6b894352"]html-block {
  padding-bottom: 0 !important;
  text-align: center;
}
[data-section-id="650b27611a98ab7b6b894352"]content-wrapper {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
[data-section-id="650b27611a98ab7b6b894352"]{
  background-color: #fafafa;
  box-shadow: 0 3px 20px rgba(0,0,0,0.08);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

Link to comment
  • Solution

You've managed to delete the periods from the classes when you swapped the section IDs, I've fixed it here:

//HORIZONTAL CONTENT NAV//

[data-section-id="650b27611a98ab7b6b894352"] .html-block p {
  display: inline-block;
  margin: 0 20px;
}

[data-section-id="650b27611a98ab7b6b894352"] .html-block {
  padding-bottom: 0 !important;
  text-align: center;
}
[data-section-id="650b27611a98ab7b6b894352"] .content-wrapper {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
[data-section-id="650b27611a98ab7b6b894352"] {
  background-color: #fafafa;
  box-shadow: 0 3px 20px rgba(0,0,0,0.08);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

You have to be careful when you use and edit code, as you've found here, it simply won't work if you accidentally delete bits.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Looks like it's working well now, but you may want to edit the section now the code is working as you could make it quite a bit shorter.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...

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.