Mega Menu im Stiletto Theme ändern

[EComMan1]

Hallo zusammen

Ich bräuchte Hilfe. Ich würde gerne wie auf dem Screenshot zu sehen, bei Punkt 1 das sich das mega menu erst öffnet wenn man drauf klickt und dann quasi "solid" bleibt sprich kein mous hover oder co...

und bei Punkt 2 würden wir gerne das dass mega menu sich in der Desktop version auf die Volle Bildbreite streckt.
Kann man das mit Css an passen?

Quasie wie bei Chanel:

https://www.chanel.com/de/haute-joaillerie/




Auf hilfe wäre ich sehr Dankbar!°

BEste Grüße
Ecomman

[Gabe]

Hey @EComMan1 

Danke für die Bilder aber um das so anzupassen wie du es gerne hättest und wie du abgebildet hast mit dem Beispiel wird das eine komplexe Programmierung verlangen dass spezifisch auf das Stiletto abgestimmt werden muss. Hast du mit den Stiletto Theme Entwickler sprechen können? Da du viel Geld für das Theme bezahlt hast, können die oft da helfen.

Dann gibt es Mega Menu Apps die das für dich in ein paar Klicks lösen können. Klicke hier einfach in die versch. Demos um die Apps in Action zu sehen. 

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Du kannst die Funktionen für das Mega-Menü in deinem Shopify-Shop in der Regel mit CSS und JavaScript anpassen. Beachte bitte, dass die genaue Umsetzung von deinem spezifischen Theme und der aktuellen Implementierung des Mega-Menüs abhängen kann.

1. Mega-Menü öffnen, wenn auf das Menü geklickt wird, und "solid" bleiben

Das erfordert wahrscheinlich eine JavaScript-Änderung. Du müsstest das bestehende Hover-Verhalten entfernen oder ändern und stattdessen einen Click-Event-Handler hinzufügen. Hier ist ein einfaches Beispiel, das dir dabei helfen könnte:

// Finde das Element, das das Mega-Menü steuert (z.B. ein Button oder Link)
var menuButton = document.querySelector('.menu-button');

// Finde das Mega-Menü selbst
var megaMenu = document.querySelector('.mega-menu');

// Füge einen Click-Event-Handler hinzu
menuButton.addEventListener('click', function() {
  // Zeige oder verstecke das Mega-Menü bei jedem Klick
  megaMenu.classList.toggle('open');
});

In deinem CSS könntest du dann die Klasse .open verwenden, um das Mega-Menü anzuzeigen, wenn es aktiviert ist:

.mega-menu {
  display: none; /* standardmäßig versteckt */
}

.mega-menu.open {
  display: block; /* angezeigt, wenn die Klasse "open" vorhanden ist */
}

2. Mega-Menü auf volle Bildschirmbreite strecken

Das ist in der Regel auch eine einfache CSS-Änderung. Du könntest so etwas versuchen:

.mega-menu {
  width: 100vw; /* Setzt die Breite auf die volle Viewport-Breite */
  left: 0; /* Positioniert das Menü am linken Bildschirmrand */
}

Denke daran, dass die spezifischen Klassennamen und die CSS- und JavaScript-Struktur je nach deinem Theme variieren können. Verwenden die Chrome Developer Console (rechtsklick in deinem Shop -> "Inspect") um die genauen Classes zu erkundigen: