Jump to content

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

Recommended Posts

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!

Screenshot 2020-07-03 at 16.38.09.png

Link to comment
  • Replies 10
  • Views 4.5k
  • Created
  • Last Reply

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!

Screenshot 2020-07-04 at 12.17.12.png

Link to comment

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!

Link to comment

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! 

Screenshot 2020-07-04 at 13.51.04.png

Link to comment

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 😉

Link to comment

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! 

Screenshot 2020-07-06 at 14.06.17.png

Screenshot 2020-07-06 at 14.09.13.png

Link to comment


This topic is now archived and is closed to further replies.

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