I created a sub nav in the bottom where people can choose a topic. I used section links. While they work, they’re inconsistent. Sometimes they show the headline before the topic (the ideal scenario) but in most cases (they scroll down in the middle, out of context with the section topic). I tried adding padding and margin to no avail. So why is Section linking not work based on where it’s supposed to start? Or I got it wrong somewhere? I am sure the IDs are correct.
I have the link in my post but anyway, here’s the latest published version, which has undergone some changes as I could not make the section link work Media Room
I have somehow made things work but not all of the subnav menu.
This last one sub nav menu link, FAQ, does not work, no matter what I do.
In general, I don’t know if anyone uses section linking within a page; it seems inconsistent. It doesn’t work all the time coming from the bottom up when clicking on the subnav menu. I don’t know if this is a Webflow bug as each sub nav menu seems fine (from the top going down at least).
I had a look at your site structure when you originally posted and I think that there are a couple of things that you could do to resolve this problem and make the site easier to work with - for example if you needed to add another link in the footer to a new service.
I don’t know where you are in your webflow journey so please do not take this as any criticism.
Establish a site structure as follows:
Body
Navigation (as a component)
General main (above the fold/ hero message)
h1
image
paragraph
Section custom-design
h2
image
paragraph
Section theater-solutions
h2
image
paragraph
Section media-room
h2
image
paragraph
Section sports-bar
h2
image
paragraph
Footer (component)
list of section links
paragraph
social links
other stuff
If you do this you will be setting up an easily modifiable visual hierarchy where your design decisions cascade down through the page(s).
You may be think of a section as a ‘target id’ for your footer links to find - like the links in your navigation and although they can be used that way that is not their purpose they are holders of blocks of content styled in a certain way that you can reuse to make the look and feel of your page consistent and therefore make it easy for your site users to quickly grasp the relationship between the parts of the page.
You want to aim for Body>Nav=>Intro=>Sections=>Footer where the Nav, footer and sections are all ‘equal’ parts within the main body element.
This is great because if you decide to change your heading typography (for example) in the media room section all the other section will update automatically. Your links will always go to the right place in each section because the styling is the same for each. This is not a webflow thing it’s about CSS and HTML and design working right.
Does this help? Your close to right even if it sounds like your not.
Reply and I’ll help you get where you need to be.
When you ask a web browser to navigate using a #fragment, it looks for the first element matching that ID, or anchor-name, and scrolls to where that currently is, at the moment you click.
In this case, the first item in your page with the ID media-faqs is actually your menu item itself. Therefore clicking it tells the browser to navigate to exactly where you already are.
Try removing that ID from the menu item, and the browser should find the section ID and scroll there instead.