Streaming live at 10am (PST)

Linking dropdown navigation menu to different sections in a page


#1

Hi,

I’m a novice in webflow i’m trying to create a dropdown navigation that when a certain link is clicked it will go to that certain section of the page, however when I press the links it doesn’t go to the top of the section it takes you to the middle of it.

Is there a way i can fix this. The problem is in the sectors navigation dropdown

Thanks

https://preview.webflow.com/preview/skdev-oct?preview=d3ac2de1d2b7ed2ad40c6a06ddb27580


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

The links work for me… I check all of them. The nav menu I saw that goes to middle of page, is simply going to that ‘Link Section’ set on that page. Retail, Corporate, Hospitality, Food & Beverage; are all individual sections of The “Sectors” link - on the sectors page. Those 4 have their own ID on this page, so it’s actually going to right place.

Everything is fine and working properly as it’s setup :slight_smile:

Do you not want this? Are you looking to do something else? It all looks very good to me, there’s no missing links or anything.


#3

Thanks for replying. When I clink on a link it takes me to the middle of the section then it slightly moves up to get to the top of the section is that normal or is there a way that once the user clicks on the link it takes them straight to the top of the section they chose


#4

Hi @Ashleygraphics17… it already goes to the right sections, I looked at it. If you hover and click on Sectors, click Retail it goes to the retail section, it does the same on Corporate.

Remember, all the other dropdown links have a set of links under it, that have their own page. Sectors is 1 page, with 4 sections inside the page, so it’s going those specific sections when you click it. It works how it was set up.

Are you seeing something different?


#5

for me it goes to the right sections but it doesn’t go to the start of each section it will go into the middle of the section then it will move up slightly.

This is how it looks when i first click on a link

Then it moves up slighlty after 2 seconds to the start of the section

is this normal?


#6

Ohhhh oh, now I understand, the slight jump up… let me look… I think it’s the section under the intro… just above the Retail section.


#7

I just deleted that section and tried to click on the navigation link and i am still having that problem :tired_face:


#8

Okay I see now… there’s 2 options.

  1. The nav menu has “Sectors” as a click drop-down, not a link to sectors page. But sectors is a page. The drop-down links are used as their own URL link, which opens a new page in browser to a new section, but it’s really going to the same place! This is not necessary. If you want to keep this, try this first fix (I can’t do it because I’m on read-only and the link is live so it’s opening the live site, and my changes don’t hold on read-only). You have to do this.
  • Go to this section: Click “Section Intro” and add ‘Bottom Margin’. Try THIS above each section - Retail, etc.

Then publish, so it will go live and then we both can make adjustments and see it work. Try that first, I’m here online, let me know if that works


#9

If that doesn’t work then, I have another fix that will for sure work, we’ll just adjust the menu item.


#10

I’ve published but following your image the changes hasn’t worked for me


#11

Okay let me check the link now. Can you re-copy and new read-only link in the project settings. It needs a new one.


#12

https://preview.webflow.com/preview/skdev-oct?preview=514b97a6348fba857c0fb03a6db596a6


#13

Do you see this?

The “Advice, Design, etc” are their own page. “Sectors” is it’s own page, but Retail and others, are inside of it. But Sectors is not a direct link. The nav menu is fixed to ‘top of the browser’, so when the link for retail, etc is clicked the link is going to the right place. But the browser is making an adjustment for you after seeing the menu is over it! Does that make sense?

If you hide the nav menu you would see it correctly. Pretty sure, even if you add bottom margin to the nav menu, it still has a higher z-index of 1000, so it’s always going to show over that section.

A Solution:

  1. I would make “Section” menu in nav a link to itself. And remove the drop-down from that link. It’s not needed, the user can just scroll down, just like they do on Contact page.

  2. Keep the drop-down and change the link setup to this screenshot. Then each link will ‘Scroll’ to the section:


#14

Thanks for coming up with some solutions.

I tried the second solution and that worked when I was on the sectors page but when I tried to click the sectors link while on another page nothing happened I was not taken to any section.

I might just take your advice from the first solution. Having the drop down menu was a good idea in principal but as I can’t get it to work smoothly, I think it will be the most logical thing to do.


#15

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.