Trouble with sticky horizontal content nav bar

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 😞

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?

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 😞

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

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

Ziggy, you are not a black ponytail holder but you stay pulling us together. And for that I say thank you.

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.

On 9/22/2023 at 5:24 AM, Ziggy said:

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.

Hi Ziggy, me again! Question: is there a way I can increase the spacing in between the anchor links? I would like the links to span horizontally more.