Linking to a section in a specific page from navbar

Hi! I am trying to link the ‘about us’ dropdown options to a specific section of a page each
I’d like ‘meet the founder’ to link to the first section of the about us page,
FAQ the bottom section, and social responsibility the middle etc

I don’t see an option to do this, it just says link to section but is then greyed out when it’s time to select

Thank you so much!


https://preview.webflow.com/preview/sheo-community-v2?utm_medium=preview_link&utm_source=designer&utm_content=sheo-community-v2&preview=da7140d4a652968607d856bab5842329&pageId=5ed7d96a4500b6586db65341&mode=preview

Hi Lara,

In order to link to a specific section, you will need to set an ‘ID’ for the element you want to link to.

Once you do that, the option to select the specific section link will then be available to select from the drop-down. It’s ‘greyed out’ at the moment because there is no ID set.

Hope that helps.
Let me know how you get on.
Keiran

Thank you so much, that helped! Also, might you know how I can edit the color of the hyperlink in the dropdown? It’s just insisting on blue and I can’t find a ‘state’ option like how I do when it’s on hover

Hey Lara,

Good stuff.

The text is blue as a result of the ‘current’ state. This is not a selectable state like hover, focused etc

To access the ‘current’ state you’ll need to go to the page or section that a link goes to, select that link and then you will see the green ‘current’ state combo-class.

In your case you will need to highlight the drop-down toggle, go to the drop-down toggle settings, open menu, select the required link (choose ‘Meet the Sheo’), then change the text colour to whatever you choose.

If this is a bit confusing, let me know and I’ll do a quick video for you.

Keiran

Thank you, all sorted!

I did this and thought it was sorted but the links are still not linking to the relevant about us page section when the website is live… I click it and it just goes nowhere. Are we only allowed to link to sections if it’s in the same page?

Hey Lara,

sorry I should have elaborated a little more regarding linking sections and using symbols (in this case your navbar)

You are correct that an anchor link (link to a section ID) will only work within the page that the link refers too, as it will scan the current page looking for that ID so it can ‘jump’ to it. If you are on a different page then the ID doesn’t exist (as far as the link is concerned).

The way to make it work for different pages is to modify the link and use the ‘external URL’ option.

The URL will look something like this: /page-name#anchor-link-ID

In your case please see the example in the image below for the FAQ link.

Please note that the link will not work in the designer preview mode, but it will work on the published site (whether webflow.io or custom domain)

Let me know how you get on.

Regards,
Keiran

I just need to jump on this for one more question: Why does the section link sometimes go about 60px past the section? like so…https://bbportflio2.webflow.io/ thanks!
I figured it out once, then messed it up again

Hi Bethel,

without seeing the exact structure of your site, I’d only be making assumptions.

However, here are a couple of posts that might help:

Let us know if that helps.

Regards,
Keiran

1 Like

Yes! apparently my navbar needed to be fixed instead of sticky Thanks!

1 Like