- Joomla Version
- 6.1.0
- PHP Version
- PHP 8.4.x
- Hoster
- https://ebead.at/eybl2026/
- Link (URL) zur Seite mit dem Problem
- https://ebead.at/eybl2026/
Ich wollte die Menüleiste neben das Logo bringen. Rechtsbündig.
Hat funktioniert, auch das HamburgerMenu erscheint an der richtigen Stelle. Leider funktioniert es nicht und klappt nicht auf.
HILFE 
Was habe ich geändert:
- ChildTemplate erstellt und neues .php File angelegt.
- Neue Modulposition "menu-right" rechts neben Brand angelegt (gemeinsamer Wrapper)
- CSS Eintrag
Eintrag in "templateDetails.xml":
Code
...
<description>TPL_CASSIOPEIA_XML_DESCRIPTION</description>
<positions>
<position>topbar</position>
<position>below-top</position>
<position>menu-right</position>
...Änderung im index.php im angelegten child-template (Kopie vom Standard index)
PHP
<header class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>">
<?php if ($this->countModules('topbar')) : ?>
<div class="container-topbar">
<jdoc:include type="modules" name="topbar" style="none" />
</div>
<?php endif; ?>
<?php if ($this->countModules('below-top')) : ?>
<div class="grid-child container-below-top">
<jdoc:include type="modules" name="below-top" style="none" />
</div>
<?php endif; ?>
<?php if ($this->params->get('brand', 1) || $this->countModules('menu-right', true)) : ?>
<div class="grid-child header-brand-row">
<?php if ($this->params->get('brand', 1)) : ?>
<div class="navbar-brand">
<a class="brand-logo" href="<?php echo $this->baseurl; ?>/">
<?php echo $logo; ?>
</a>
<?php if ($this->params->get('siteDescription')) : ?>
<div class="site-description"><?php echo htmlspecialchars($this->params->get('siteDescription')); ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($this->countModules('menu-right', true)) : ?>
<div class="menu-right-inline">
<jdoc:include type="modules" name="menu-right" style="none" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>Und der css Eintrag dazu:
CSS
/* Menü rechts neben Logo */
.container-nav-right {
display: flex;
justify-content: flex-end;
align-self: flex-end;
}
.container-nav-right .mod-menu,
.container-nav-right .navbar {
margin-left: auto;
}
@media (max-width: 1199.98px) {
.container-nav-right .navbar-toggler {
margin-bottom: 0 !important;
transform: translateY(6px);
}
}
.header-brand-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.menu-right-inline{margin-left:auto}
/* Hamburger Menü ab 1200px statt Standard */
@media (max-width: 1200px) {
.container-header .mod-menu {
display: none; /* Versteckt das Desktop-Menü */
}
.container-header .navbar-toggler {
display: block; /* Zeigt den Hamburger-Button */
}
/* Optional: Falls das Offcanvas-Menü nicht automatisch kommt */
.container-header .navbar-collapse.offcanvas {
display: none;
}
}
/* Umgekehrt: Desktop-Menü verstecken, wenn der Hamburger aktiv ist */
@media (min-width: 1201px) {
.container-header .navbar-toggler {
display: none; /* Hamburger ausblenden */
}
}
/* Farbe des Hamburger-Menü-Icons ändern */
.container-header .navbar-toggler {
color: #1b97d3;
cursor: pointer;
border: 1px solid #fff;
}
Das könnte ich dann noch probieren