Navigating with a page using id

  • Hi. I’m setting up a page of links to advice on various gardening issues. To navigate easily on a long page, I’ve used pictures in a Gallery Bank gallery, each with a link to that section on the page. The page is at https://growchiswick.org/growing-hints-tips/, and the URL I’ve used for the photos is (eg) https://growchiswick.org/growing-hints-tips/#wildlife. Then for each h2 header, I’ve put

    <h2 id=”wildlife”>

    My problem is that the cursor doesn’t move to all the headers in the same way. The wildlife header works properly, but for others the header is lost underneath the navigation bar.

    Please can someone tell me what I am I doing wrong?

Viewing 3 replies - 1 through 3 (of 3 total)

  • You actually aren’t doing anything wrong; this is the standard behavior for the way that particular theme is coded.

    The problem is that when you link to an ID, the browser scrolls to the point where that element is at the top of the view port. Because you have a sticky header, the element you’re linking to ends up behind it.

    My understanding is that what you’re trying to achieve would require javascript, i.e

    https://www.jozefbutko.com/stickynavbar

    here’s how it handles auto-scrolling: https://www.jozefbutko.com/stickynavbar/#setup

    Thread Starter johodges

    (@johodges)

    Thanks for your quick response Matt. Javascript is a step too far for my skills, so I think I’ll cheat by putting the id tags a couple of lines higher up. A bit messy but should work. Maybe I’ll get my head around javascript another time.

    Thread Starter johodges

    (@johodges)

    actually, my cheat doesn’t work – the <h2 id=”wildlife”> bits keep getting deleted, not sure why. Guess I’ll have to master javascript or live with imperfection.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Navigating with a page using id’ is closed to new replies.