Masonry theme requires a Mediator skeleton, with which I had the same issue, but had solved. But now that I switched to Masonry (which was the intention all along), the issue is back. I applied the same fix as with Mediator on the Masonry theme (replacing base_url_relative with home_url), but to no avail.
When you click on the site icon (top-left corner of the page), or on the breadcrumb to Home, you’d expect to go to the home page. But instead, it just reloads the current page.
Looking at it from my browser, when I inspect the element, the ‘blog-logo’ link doesn’t point anywhere. Same for the breadcrumb that supposedly leads to ‘Home’.
There are two files that reference ‘blog-logo’: default.html.twig and header.html.twig.
Default.html.twig:
{% extends 'partials/base.html.twig' %}
{% set collection = page.collection() %}
{% block content %}
<header class="main-header {% if page.header.cover %}" style="background-image: url({{ page.media[page.header.cover].url }}) {% else %} no-cover {% endif %}">
<nav class="main-nav overlay clearfix">
{% if site.logo %}
<a href="{{ home.url }}" class="blog-logo"><img src="{{ theme_url }}/images/{{site.logo}}" alt="{{ site.title }}" width="100%" height="100%" /></a>
{% endif %}
<a class="menu-button icon-menu" href="{{ home.url }}">
<label for="show-menu" class="word">{{ 'THEME_MASONRY.MENU_TITLE'|t }}</label>
</a>
</nav>
<div class="vertical">
<div class="main-header-content inner">
<h1 class="page-title">{{ site.title }}</h1>
<h2 class="page-description">{{ site.description}}</h2>
</div>
</div>
<a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"> <span class="hidden">Scroll Down</span></a>
</header>
<main id="content" class="content" role="main">
<div class="wrapper">
<section class="masonry">
{% for post in collection %} {% include 'partials/article.html.twig' %} {% endfor %}
</section>
</div>
{% if config.plugins.pagination.enabled and collection.params.pagination %}
{% include 'partials/pagination.html.twig' with {'base_url': page.url, 'pagination':collection.params.pagination} %}
{% endif %}
</main>
{% endblock %}
Header.html.twig:
<header class="main-header post-head {% if page.header.image %}" style="background-image: url({{ page.media[page.header.image].url }}){% else %}no-cover{% endif %}">
<nav class="main-nav {% if page.header.image %}overlay{% endif %} clearfix">
{% if site.logo %}
<a href="{{ home.url }}" class="blog-logo"><img src="{{ theme_url }}/images/{{site.logo}}" alt="{{ site.author.title}}" /></a>
{% endif %}
<a class="menu-button icon-menu" href="{{ home.url }}"><span class="word">{{ 'THEME_MASONRY.MENU_TITLE'|t }}</span></a>
</nav>
</header>
In the case of Mediator, I needed to replace base_url_relative with home_url, which I did in this case too. But while that worked for the Mediator theme, it did not for the Masonry theme.
Here’s the file breadcrumbs.html.twig:
<ul class="post-header__breadcrumb">
<li><a href="{{ home.url }}" title="blog homepage">{{ 'THEME_MASONRY.HOME'|t }}</a></li>
<li>-</li>
<li>{{page.title}}</li>
</ul>
I think it may have to do with ‘THEME_MASONRY.HOME’, which looks like a variable, but I can’t find where that is defined. Or is that just the title, not the base URL? There’s also a ‘THEME_MASONRY.MENU_TITLE’ called in header.html.twig and default.html.twig, so how would that one be different?