Linking drop down menu in Navigation Bar to a specific section section on Homepage

Site URL: https://harpsichord-iris-5pyr.squarespace.com

Hi all, 

I'm trying to keep as much on the Homepage as possible for easy scrolling on mobiles etc. However, I want to include a drop down menu in the Navigation Header that takes you to a specific section lower down on the Homepage.

Ideally, I would create a Link page in the dropdown that would take me to the section. But in the Pages menu, I'm not able to add sub-sections on the Homepage (which is 'Not Linked' - in case that makes a difference)

If you refer to the image attached: I want to include the HOW I WORK & PRICING sections within the Homepage, but have both headings available in the Navigation Bar. I hope that makes sense!

Thanks in advance!

hi @Adam9 - I think you're looking for anchor links. You create an unique ID with a code block in a specific part of your page and add this ID as an anchor link in your dropdown. Here's a guide on how to use anchor links, but if you have any difficulties with it, let me know 😉  I hope this helps!

Hi @lu.diehl, thanks so much for responding and for your help. 

Great, this makes sense to me 🙂

I haven't launched the site yet (so can't yet actually test the link) but have set it up, ready for when I do. 

The only 'slight' issue, is that linking the text means it will be underlined, which I don't want. Is there a way to link to the text block without having the text underlined?

(In the attached image, you can see I've only linked the 'I', but would much rather not if possible.)

Thank you again!

Yes, when you have link it automatically underlines it. You can fix this in a couple of different ways but I'll show you one...

in your code block you probably have something like this:

<h1 id="unique-id">HOW I WORK</h1>

Add a piece of styling like this:

<h1 id="unique-id" style="text-decoration: none!important;">HOW I WORK</h1>

Let me know if this worked!

Hi, thanks again for your help. At this point, I should probably say that I am a complete novice so will need to clarify a couple of things! 🙂

I am not sure if I am meant to add the Code to the Text Block. How do you do this if so?

When I add a Code Block above the text, will I then need to delete the text block (so it's not repreated)? If so, will the drop down menu still link to this section?

Thank you again, and apologies if this is a very basic question! 

Hi @lu.diehl, sorry I forgot to tag you above! 🙂

Hey @Adam9 - I wasn't sure how you ended up doing it... the letter "I" is underlined and if you added the code as an empty code block, the I shouldn't be a link. 

Ok, here we go:

1. Remove the link associated with the letter "I"
2. In the code block you have above your text, remove the text in btw the <> elements: 

<p id="how-i-work"><p>

3. Add an anchor link as a dropdown
- under COACHING, click Add a Page and choose "Link"
- add your Link Title: "How I work"
- add your anchor link: "/your-page-url/#how-i-work"

I hope this helps!! Let me know. If you still are having trouble with it, please make your site password protected and share the password with me 😉

Thank you @lu.diehl

OK so... if the code block is within the green box it increases the size of the box, which doesn't look right.

So I guess i'll have to have the Code Clock above it, which increases the gap between sections. Unless there is another way you can suggest?

Having too big a gap between sections is a recurring problem for me, so any guidance on that would be appreciated too... thank you! 

Hi @Adam9 - this will happen and you can add css to remove the extra padding, but let's change the approach and add this to your code block instead:

<h1 id="how-i-work" style="text-align: center;">How it Works<h1>

Hey @Adam9 - did you fix it?

Hey @lu.diehl 🙃

I have set it all up but haven't tested yet as the site is not yet live! I will send you a message with my password 🙂