Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
Solved by pamtbaau View solution
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!
@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.
Thanks so much for taking a look... only... where can I rename "header"?
@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'...
Thanks so much, makes perfect sense. Thanks for taking the time to explain.
It worked!
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 2 | 60 | 16 hours ago | ||
| 2 | 66 | 19 hours ago | ||
| 1 | 34 | 20 hours ago | ||
| 2 | 70 | 6 days ago | ||
| 2 | 61 | 6 days ago |