Need to make the title text a URL that links to the homepage

[futuresoup]

Hi - my usability tests on mobile are are showing difficulty for the user to navigate back to the home page.

I know it's a simple modification by extending the header.html partial here:

<!-- Link to home -->
<a
  href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
  title="{{ config.site_name | e }}"
  class="md-header__button md-logo"
  aria-label="{{ config.site_name }}"
  data-md-component="logo"
>
  {% include "partials/logo.html" %}
</a>

The reason this is so important:

Only the logo/icon goes to the home page. It is difficult to figure this out on a phone through the standard menu navigation because you have find the back arrow and click several times in the menu interface.

This can be easily fixed by also having the Title text link to the homepage, because the Title text is always present at the top, no matter the screen size.

This will greatly help my site usability - any assistance with the code snippet is very much appreciated. Thank you! 🙏

[squidfunk]

You could use navigation.path to add breadcrumbs, which will include a link to home, but it's currently reserved to sponsors.

[futuresoup]

Thanks @squidfunk - glad to see the breadcrumbs option which I will gladly pay for,

But isn't there a simple solution in the header.html partial that I can implement to make the title link to home?

I tried getting ChatGPT to tell me but it didn't quite get it right : \

<a
href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
title="{{ config.site_name | e }}"
class="md-header__button md-logo"
aria-label="{{ config.site_name }}"
data-md-component="logo"

{% include "partials/logo.html" %}

[squidfunk]

Override header.html (copy all contents) and replace the following lines with a link:

mkdocs-material/src/partials/header.html

Lines 57 to 61 in 270129a

	<div class="md-header__topic">
	<span class="md-ellipsis">
	{{ config.site_name }}
	</span>
	</div>

Something like (untested):

<a href="https://www.google.com" class="md-header__topic"> <!-- Put your link in 'href' -->
  <span class="md-ellipsis">
    {{ config.site_name }}
  </span>
</a>

[CallumWalley]

I've noticed most users will intuitively click on the 'header-title' text when wanting to return to landing page (the icon usually being the second thing they will click on).

I'll probably override the header.html for our site, i'm just wondering if there was a reason you chose not to implement it this way? @squidfunk

[squidfunk]

Primarily due to mitigating "fat fingers" on mobile when trying to scroll to the top, where users will tap on the browser bar to scroll back up. The back-to-top button is another option to make it easier (as it has more surface area than the browser bar on iOS at least), but not all sites have enabled it, and tapping on the browser bar is learned behavior. If the user slightly misses the browser bar and taps the header, he's going to the landing page which is a request that might get the user frustrated on slow connections as we're inducing navigation where no navigation would be necessary.

We could still somehow implement it for desktop, but that would mean it would be different behavior, which might also be unexpected. It's really hard to decide what's the right thing to do here.

I've answered this in detail in #2044 (comment).

[squidfunk]

An, IMHO, better solution is to use navigation.path to add breadcrumbs, which will include a link to home, but it's currently only available in Insiders and reserved to sponsors.

[CallumWalley]

Makes sense, thanks for your prompt and in-depth reply.

I would definitely like to explore insiders at some point, I will have a talk with the higher ups 😉