[GELÖST] Unterschiedliches Layout zwischen Sticky Menu und Desktop Menu

gwiora
Autor
Junior Mitglied
Beiträge: 28
Dank erhalten: 0

[GELÖST] Unterschiedliches Layout zwischen Sticky Menu und Desktop Menu wurde erstellt von gwiora

Posted 4 Jahre 2 Monate her #1

Bei mir ist das Sticky Menu auf einem breiten Bildschirm deutlich schmaler als das Desktop Menü und hat links und rechts große Abstände von den Seitenrändern. Es scheint nicht den selben Container-Stil zu verwenden wie das was in der Astroid Layout-Section für das Menü eingestellt wurde.

Fehlt hier ein Feature um das Sticky Menu anzupassen oder ist das ein Bug da es automatisch das gleiche Schema verwenden sollte?

So sieht das standard Menü im code aus:

Code:

<header data-megamenu="" data-megamenu-class=".has-megamenu" data-megamenu-content-class=".megamenu-container" data-dropdown-arrow="false" data-header-offset="true" data-transition-speed="300" data-megamenu-animation="slide" data-easing="easeInOutQuad" data-astroid-trigger="hover" data-megamenu-submenu-class=".nav-submenu,.nav-submenu-static" id="astroid-header" class="astroid-header astroid-horizontal-header astroid-horizontal-right-header">
   <div class="d-flex flex-row justify-content-between">
     <div class="d-flex d-lg-none justify-content-start">
      ...
    </div>
  </div>
</header>

... und so das sticky Menu:

Code:

<header id="astroid-sticky-header" data-megamenu="" data-megamenu-class=".has-megamenu" data-megamenu-content-class=".megamenu-container" data-dropdown-arrow="false" data-header-offset="true" data-transition-speed="300" data-megamenu-animation="slide" data-easing="easeInOutQuad" data-astroid-trigger="hover" data-megamenu-submenu-class=".nav-submenu" class="astroid-header astroid-header-sticky header-sticky-desktop header-stickyonscroll-mobile header-sticky-tablet d-flex">
  <div class="container d-flex flex-row justify-content-between">
    <div class="d-flex d-lg-none justify-content-start">
      ...
    </div>
  </div>
</header>

von gwiora

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

joomlaplates
Moderator
Beiträge: 2648
Dank erhalten: 407

joomlaplates antwortete auf [GELÖST] Unterschiedliches Layout zwischen Sticky Menu und Desktop Menu

Posted 4 Jahre 2 Monate her #2

Hallo,
das Sticky menu hat einen Container, demnach einen Abstand nach aussen.
Das kann man auch mit css ändern, jedoch nicht im Astroid

Code:

#astroid-sticky-header .container {padding: top right bottom left}

von joomlaplates

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

gwiora
Autor
Junior Mitglied
Beiträge: 28
Dank erhalten: 0

gwiora antwortete auf [GELÖST] Unterschiedliches Layout zwischen Sticky Menu und Desktop Menu

Posted 4 Jahre 2 Monate her #3

joomlaplates schrieb:

Code:

#astroid-sticky-header .container {padding: top right bottom left}

Danke für den Tipp, aber der Sticky header Container ist anscheinend nicht die Ursache der Verschiebung. Links vom Logo ist ein dynamischer Abstand der immer größer wird je mehr man die Fensterbreite erhöht. Bei einem schmalen Fenster sind die Abstände bei sticky Menü und normalem Menü gleich gleich.

von gwiora

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

gwiora
Autor
Junior Mitglied
Beiträge: 28
Dank erhalten: 0

gwiora antwortete auf [GELÖST] Unterschiedliches Layout zwischen Sticky Menu und Desktop Menu

Posted 4 Jahre 2 Monate her #4

Ich glaube ich habe die Ursache für den Layoutunterschied gefunden, weiß aber leider nicht ob ich das abstellen kann. Für mich sieht das auch eher aus wie ein Programmierfehler.

Das <header> tag enthält beim sticky menü als letzten Eintrag die Klasse "d-flex". Das ist beim normalen Menü nicht der Fall und das scheint auch den Abstand des Sticky Menüs bei breiten Fenstern vom Rand zu aktivieren.

Code:

<header id="astroid-sticky-header" data-megamenu="" data-megamenu-class=".has-megamenu" data-megamenu-content-class=".megamenu-container" data-dropdown-arrow="false" data-header-offset="true" data-transition-speed="300" data-megamenu-animation="slide" data-easing="easeInOutQuad" data-astroid-trigger="hover" data-megamenu-submenu-class=".nav-submenu" class="astroid-header astroid-header-sticky header-sticky-desktop header-stickyonscroll-mobile header-sticky-tablet d-flex">

von gwiora

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

gwiora
Autor
Junior Mitglied
Beiträge: 28
Dank erhalten: 0

gwiora antwortete auf [GELÖST] Unterschiedliches Layout zwischen Sticky Menu und Desktop Menu

Posted 4 Jahre 2 Monate her #5

Jetzt habe ich einen Hack gefunden mit dem sich das Problem umgehen lässt:

Code:

#astroid-sticky-header .container 
{
     max-width: none;
}

Das beseitigt die max-width von 1280px aus dem Header-Element, so dass es sich auch bei großen Fenstern ausbreiten kann.

Unschön. Wäre cool wenn das im nächsten Template-Update nicht mehr nötig wäre.

von gwiora

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

BiostaR
Junior Mitglied
Beiträge: 38
Dank erhalten: 1

BiostaR antwortete auf [GELÖST] Unterschiedliches Layout zwischen Sticky Menu und Desktop Menu

Posted 3 Jahre 2 Monate her #6

gwiora schrieb:
Jetzt habe ich einen Hack gefunden mit dem sich das Problem umgehen lässt:

Code:

#astroid-sticky-header .container { max-width: none; }

Das beseitigt die max-width von 1280px aus dem Header-Element, so dass es sich auch bei großen Fenstern ausbreiten kann.

Unschön. Wäre cool wenn das im nächsten Template-Update nicht mehr nötig wäre.

Hallo und schöne Feiertage,
ich nutze bei unserem Verein das Template Lawyer. Hier hatte ich dasselbe Problem. Sticky Header hat die Menüeinträge verschoben. Habe es nun so wie mein Vorredner gelöst.

Grüße

von BiostaR

Bitte Anmelden oder Registrieren um der Konversation beizutreten.