[Resolved] Links on mobile phones to go directly to the content, and skip header+navigation

Hi

On a mobile it is often tedious, and sometimes even confusing, that links to another page/post take you to the top, to the standard page header and navigation, rather than directly to the desired content. As you can only see the header and navigation on the small screen, it can seem like you’ve just gone to the top of the same page, or at least leave you unsure whether you’re in the right place until you scroll down.

Yet on a larger desktop screen that kind of link is exactly right, because you can see the full page, with the header, navigation and new content.

So I’m wondering whether there a simple way to make links eg to /events/ link instead to /events/#jump-nav on mobile phones?

(This question followed a successful discussion of a problem with David at https://generatepress.com/forums/topic/skip-link-to-content-bypasses-the-h1-title/ where we created an HTML anchor #jump-nav to jump the navigation without also jumping the h1 title.)

As ever, I’d like to do this with CSS which I understand, rather than js which I don’t, and anyway avoid another script.

In this case I have a series of images on the Home page that each link to a category archive page. I just want them to link directly to the h1 heading and content on those destination pages when on a mobile phone, and so skip the header and navigation.

(Each image already has position:absolute text positioned over the image, in a way that deliberately replicates a WPSP display in David’s Dispatch template that I use elsewhere. So the container is already position:relative. )

So I’m thinking… maybe there could be an invisible overlay over the existing containers of each image+text, which is set to display:none on large screens, and display:block; position:absolute on small screens, and contains the alternative #jump-nav link.

Hey – this started as a question, but in asking it I think I’ve solved it… I’m carrying on as it may be useful for others. It seems to work, but I’d value your comment. (I’ve used David’s overlay code from here: https://generatepress.com/forums/topic/text-over-image/)

So my solution is… within each existing container which contains my existing image+overlay text, I have simply added an HTML block below them. The HTML is for example:

<a href="https://thiswebsite.uk/events/#jump-nav" class="jump-nav-overlay"> </a>

In the next container it is:

<a href="https://thiswebsite.uk/activities/#jump-nav" class="jump-nav-overlay"> </a>

With the container already set to position:relative, the CSS is then:

.jump-nav-overlay {
  display: none;
}

@media (max-width:480px) {
.jump-nav-overlay {
    display: block;
    position: absolute;
    background-color: transparent;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
  }
}

It seems to work. If so, it’s simpler than I initially thought. Any improvements welcome.

Thank you