× Bitte immer Live Url, PHP Version, Template Version und Template Name angeben

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

  • Beiträge: 28
  • Dank erhalten: 0

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

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:
<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:
<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>
2 Jahre 10 Monate her #1

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 2142
  • Dank erhalten: 323

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

Hallo,
das Sticky menu hat einen Container, demnach einen Abstand nach aussen.
Das kann man auch mit css ändern, jedoch nicht im Astroid
#astroid-sticky-header .container {padding: top right bottom left}
2 Jahre 10 Monate her #2

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 28
  • Dank erhalten: 0

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

#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.
2 Jahre 10 Monate her #3

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 28
  • Dank erhalten: 0

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

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.
<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">
2 Jahre 10 Monate her #4

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 28
  • Dank erhalten: 0

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

Jetzt habe ich einen Hack gefunden mit dem sich das Problem umgehen lässt:
#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.
2 Jahre 10 Monate her #5

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Beiträge: 38
  • Dank erhalten: 1

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

Jetzt habe ich einen Hack gefunden mit dem sich das Problem umgehen lässt:
#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
1 Jahr 10 Monate her #6

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Installations-Service

Sparen Sie Zeit, wir installieren ihr gekauftes Joomla Template
mit all den dazugehörigen Extensions und dem "Demo Inhalt" innerhalb der nächsten 24 Stunden
auf einem Server/Webhost ihrer Wahl

Kaufen - 59€

Copyright © 2008 - 2024 Joomlaplates | Professional Joomla Templates

Impressum & Datenschutz | AGB