HTML bookmaks using id attribute not working in Hub site pages and navbar header

11-17-2023 02:29 PM
Labels (2)
New Contributor II

Hi there,

I recently launched an ArcGIS Hub site Open Data Midpen.

There appears to be an issue with HTML bookmarks that use the id attribute, which I would like to use to jump readers to specific parts of the page. I suspect it has something to do with the custom HTML/CSS navigation bar I developed (thanks, MM, for this inspirational story map). Or perhaps I am misusing id attributes somehow. I attached the HTML and CSS code of the custom navbar to the post.

Within some pages, I used the HTML id attribute to assign a unique ID to header elements within a larger block of text.

Example 1 id="overview"

<div class="banner-heading" id="overview">Find the right trail</div>

Example 2 id="help-resources"

<section id="help-resources"><h1>Help resources</h1></section><blockquote class="blockquote">Review materials below[...]</blockquote>

Then, I took these bookmarks and added links to the navbar:

 <a href="">Overview</a>

<a href="">Help resources</a>

I also inserted a hyperlinked text string within the page body:

<section id="trail-explorer"><h1 style="text-align: left;">Trail Explorer app</h1></section><blockquote style="text-align: left;" class="blockquote">Filter trails based on your recreational and mobility needs. Review the <a href="">help resources</a> before you begin.</blockquote>

So, when a user navigates from another site page (e.g. Home) to the Find the Right Trail page via the header link, they get to Then, after clicking hyperlinked text string, it jumps the user down the page as expected. While on that page, users can click on the other header drop-down items for the page they are on, and it jumps them around. Great!

BUT, when a user gets to the Find the Right Trail page via the direct URL (no #overview at the end of URL), the hyperlinked text string does not do anything, neither does the header.

Is this a bug?

Are there issues with my code? Admittedly, I am a novice when it comes to HTML/CSS/bootstrap (for now!).

Any clever workarounds?

Many thanks,

Jamie Hawk

0 Kudos
0 Replies