[Antimatter] Bug in connection with Vimeo/Soundcloud?

Support
1

I’m having an issue with a modified Antimatter theme.

I created a “submenu” in the header of a page and suddenly, it seems as if the links are not clickable anymore: http://test.learahelbader.com/de/media

While the same submenu is clickable on this other page, which is a complete copy:
http://test.learahelbader.com/de/vita

I don’t know what I’m missing. The only connection is that on the “media” (the first) page there are embeds to Soundcloud/Vimeo.

Can anyone take a quick look? Cheers!

2

@werdi I don’t think it has anything to do with Soundcloud/Vimeo.

When you hover a little bit above ‘Video’, you’ll see the mouse pointer change. If you click there, you will jump to the #video anchor.

The difference between both pages is the empty div <div id="header"></div> versus <div id="vita"></div>. They are defined just above the submenu. The div with id ‘header’ has css attached, while div with id ‘vita’ has not.

The attached css is intented for the real <header> which also uses the id ‘header’. By the way, Ids should never be reused.

If you rename ‘header’ the issue will be fixed.

1 Like
3

Thanks so much for taking a look… only… where can I rename “header”?

4

@werdi I was a bit incomplete in the previous reply. Sorry for that…

TL;DR: Change the value of ‘menu: Header’ in the frontmatter of the file containing the submenu.

Why?

The page is a modular page, using template /templates/modular.html.twig which loops through all modules and prints the module’s content.

{% block content %}
    {{ page.content }}
    {% for module in page.collection() %}
        <div id="{{ _self.pageLinkName(module.menu) }}"></div>
        {{ module.content }}
    {% endfor %}
{% endblock %}

Pay attention to the line:

<div id="{{ _self.pageLinkName(module.menu) }}"></div>

which creates an empty div with the value of 'module.menu' as id…
If that module has a frontmatter with ‘menu: header’, an empty div with id="header" will be generated.

Since the designer has defined css for <header id="header">, the new div with the same ID will also use that same css and hence the layout of the page gets ‘confused’…

1 Like
5

Thanks so much, makes perfect sense. Thanks for taking the time to explain.

It worked!