Reduced functionality for the header links and anchor targets on ParkDC.com

295
5
09-30-2021 08:27 AM
JosephKerwin
New Contributor

I am noticing some reduced functionality for the header links and anchor targets on ParkDC.com.

The first is that, once you are on a page, the anchor links will not work within that page. If you navigate using the header, you will not be able to select a second link on the same page from the header.

Example is, if I am already here https://www.parkdc.com/pages/permits#FAQs, the header link to https://www.parkdc.com/pages/permits#access does not work.

The targets are all structured like the below at the top of each section.

<a class="anchor" id="access"></a>

<a class="anchor" id="FAQs"></a>

Stylesheet for anchor is:

a.anchor {
display: block;
position: relative;
top: -45px; visibility: hidden;
}


/* On screens that are 768 or more, section links target adjust*/
@media screen and (min-width: 768px) {

a.anchor {
display: block;
position: relative;
top: -45px; visibility: hidden;
}

}


/* On screens that are 1199 or more, section links target adjust*/
@media screen and (min-width: 1199px) {

a.anchor {
display: block;
position: relative;
top: -45px; visibility: hidden;
}

}

The second is that the slug is not loading at all in some cases. Example is, clicking https://www.parkdc.com/pages/residential#residential_permit_parking_map bring you to the correct area on the page but the URL displayed is https://www.parkdc.com/pages/residential.

@Alex-Santos 

0 Kudos
5 Replies
Alex-Santos
Occasional Contributor

@KlaraSchmitt, how can we ensure that anchor links from the custom header direct to the correct page/section?

0 Kudos
JenniferSherry
New Contributor III

@JosephKerwin I don't have an answer, but a question for you about how you are doing this.  I've been trying to do something similar with anchors, but in a much less sophisticated way, because I couldn't find any documentation specifically for this offset by the depth of the header when jumping to an anchor section on the page.  I'm a CSS newbie, so can you direct me where I would add this stylesheet code for the anchor offset?

Thanks much-

Jennifer

0 Kudos
JosephKerwin
New Contributor

Hi Jennifer,

Definitely! This is all in a stylesheet in the Footer. From your home page, it is Edit -> Footer -> Custom. I have mine in the HTML option. I attached the full section if that is helpful. I just had to play around with the pixel (px) count to have it drop down to the correct part of the page.

The below goes in the text section you are targeting.

<a class="anchor" id="photos"></a>

If that section is on your home page, https://www.randomarcgishubsite.com/#photos would target it. On another page, https://www.randomarcgishubsite.com/pages/anotherpage#photos would target it.

Hope this helps!

 

0 Kudos
KlaraSchmitt
Esri Contributor

Hello,

I'm sorry to hear that you are having problems. Unfortunately, this appears to be a bug. We are investigating.

JosephKerwin
New Contributor

Hi @KlaraSchmitt,

Thank you for the help! I was testing the site out to try to narrow down the issue. For the first issue (anchor links not working within page), it appears to be an issue only if I first navigate to the base page.

So, if the first time I visit the page is to https://www.parkdc.com/pages/meters, the header links will not work to navigate to https://www.parkdc.com/pages/meters#how_to_use_a_meter.

If I first visit the page at https://www.parkdc.com/pages/meters#meter_hours_and_rates, then I will be able to use the header links to navigate to https://www.parkdc.com/pages/meters#how_to_use_a_meter.

I am still seeing the second issue as well (slug not loading at all), primarily when quickly loading different pages in a row.

Happy to troubleshoot more if that is helpful!

Thanks,
Joe

0 Kudos