Jump to content

[gelöst] Prestasop 1.6 Unterkategorien überdecken Kategorien in Horizontal Navigation


Don Cappello

Recommended Posts

Hallo zusammen.

Ich habe über das Modul "Horizontal Navigation" einige Kategorien angelegt.
Bei den Kategorien in der 2.Zeile werden diese beim herüberfahren mit der Maus von der Unterkategorie überdeckt.
Das ist natürlich schlecht, da man so die eigentliche Kategorie nicht mehr anklicken kann.
Gibt es hier eine Lösung?

Gruß

 

NICO

Screenshot - 10.05.2019 , 11_56_37.png

Link to comment
Share on other sites

Anhand deines Screenshots läßt sich das schlecht nachvollziehen, dort wo der dunkle Strich zu sehen ist, steht "Textilien"? Das scheint mir nicht standardmäßig zu sein, läuft da ein zusätzliches Modul? Bei den Kategorien links unten wird die Kategorie "Schaufenster" auch gar nicht aufgeführt, scheint gar keine normale Kategorie zu sein?

Link to comment
Share on other sites

Naja aber doch nur beim mouseover von Schaufenster und was meinst Du mir " da man so die eigentliche Kategorie nicht mehr anklicken kann "? Wenn der User mit der Maus auf "Schaufenster" ist gehe ich davon aus das er diese auch anklicken möchte und ansonsten soll er seine Hand bewegen ;)

Was hättest Du denn gerne was passiert, das der Menüpunkt Textilien nach unten rutscht? Da solltest Du eher schauen das Du im Hauptmenü einzeilig bleibst, sprich mit mehr Unterkategorien arbeiten. Ein mehrzeiliges Hauptmenü ist eh gewöhnungsbedürftig.

Link to comment
Share on other sites

Du meinst, das Hauptmenu hat zwei Zeilen? Es ist halt generell schlecht, wenn man mit solchen Schlüsselloch-Screenshots abgespeist wird, die nur einen Teil der Seite zeigen, bei einem Overlay wäre auch ein Screen vom Vorher-Zustand sinnvoll, viel besser, wenn möglich, natürlich ein Link zum Shop.

Generell, die Position des Overlays kann man per CSS verändern.

Link to comment
Share on other sites

Hallo,

 

ihr habt ja Recht, es ist ohne den Vorher Screenshot nicht so gut zu verstehen.
Ich habe die Standardmodule für die Horizontale Navigation.
Leider benötige ich einige Hauptkategorien, weshalb hier auch die 2. zeile benötigt wird.
Ich hänge den Screenshot an, welche die Navigationsleiste der Kategorien vor dem Mouseover zeigt.

Sicher muss man hier die Position des aufklappenden Untermenüs weiter nach unten setzen.
Hier wird sicher von der Oberkannte der Menüleiste ausgegangen und bei einer 2. zeile die untere überdeckt.

 

Gruß

 

Nico

Screenshot - 13.05.2019 , 11_21_34.png

Edited by Don Cappello (see edit history)
Link to comment
Share on other sites

Hallo Don Capello,

es würde wenig Sinn machen, die Unterkategorienanzeige weiter nach unten zu verschieben, die Anzeige deines Menus ändert sich ja dynamisch, bei entsprechend kleiner Auflösung und kleinem Bildschirm hast du dann auch mal 3 Zeilen Menu.

Außerdem könnte man ja keine Unterkategorien mehr anklicken, da die Maus beim Versuch nach unten zu kommen immer über eine andere Hauptkategorie fahren würde und diese aktivieren würde.

Es gibt zahlreiche Menu-Module auf dem Markt, mit denen du - für deine Anwendung - bessere Ergebnisse erzielen kannst.

Grüsse
Whiley

  • Thanks 1
Link to comment
Share on other sites

Hallo Nico,

du kannst entweder die blocktopmenu.php ändern oder besser die Anzeige der Subkategorien über css unterbinden.

Am einfachsten nimmst du die global.css

(themes\deintheme\css\global.css)

und hängst dort als unterste Zeile an:

#block_top_menu ul li ul {display:none!important;}

Cash löschen nicht vergessen!

Grüsse
Whiley

  • Like 1
Link to comment
Share on other sites

Evtl. könnte man besser testen, wenn man einen Link zum Shop hätte oder zumindest zu einem anderen Shop mit dem Default-Theme mit 2 Menuzeilen ... Ich würde ggf. versuchen, den Container am unteren Rand der Horizontalen Menuleiste auszurichten. Aber so etwas muß man halt erst einmal ausprobieren. Ich bin übrigens nicht sicher, daß sich die Verteilung auf die Zeilen bei Verkleinerung der Seite ändert, in meinem Shop ist es nicht so (da wird der Text einzelner Menupunkte aber ggf. umbrochen und das Menu dadurch auch höher).

Link to comment
Share on other sites

vor 9 Stunden schrieb rictools:

Ich würde ggf. versuchen, den Container am unteren Rand der Horizontalen Menuleiste auszurichten. 

Das könnte einiger Übung bedürfen um den unteren Container solange er offen ist mit der Maus zu erreichen😉

Link to comment
Share on other sites

  • Whiley changed the title to [gelöst] Prestasop 1.6 Unterkategorien überdecken Kategorien in Horizontal Navigation
vor 7 Stunden schrieb Whiley:

Das könnte einiger Übung bedürfen um den unteren Container solange er offen ist mit der Maus zu erreichen😉

Es ist natürlich wichtig, dass sich zwischen dem Menurahmen und dem Overlay keine Lücke befindet, sollte per CSS möglich sein, aber ohne ausprobieren zu können halt schwierig.

Generell sind Kunden mittlerweile halt an mehrstufige Navigationen gewöhnt und wenn ihre Erwartung, beim MouseOver die Unterkategorien zu sehen enttäuscht wird, wird vielleicht der eine oder andere Kunde verlorengehen.

Ggf. wäre es vielleicht sinnvoller, die Zahl der Menupunkte zu verringern, damit sie in eine Zeile passen, "Start" braucht nun wirklich niemand, was sich hinter "Schaufenster" verbirgt weiß ich nicht und der potentielle Kunde wohl auch nicht, "Boot" ist auch unklar, "KFZ-Beschriftung" ist ja wohl eher eine Unterkategorie der "Aufkleber"?

Link to comment
Share on other sites

Am 14.5.2019 um 7:42 PM schrieb rictools:
Am 14.5.2019 um 11:57 AM schrieb Whiley:

Das könnte einiger Übung bedürfen um den unteren Container solange er offen ist mit der Maus zu erreichen😉

Es ist natürlich wichtig, dass sich zwischen dem Menurahmen und dem Overlay keine Lücke befindet, sollte per CSS möglich sein, aber ohne ausprobieren zu können halt schwierig.

Die Quatratur des Kreises wäre einfacher zu lösen!
 

Link to comment
Share on other sites

  • 2 years later...
Am 13.5.2019 um 12:16 PM schrieb Whiley:

Hallo Don Capello,

es würde wenig Sinn machen, die Unterkategorienanzeige weiter nach unten zu verschieben, die Anzeige deines Menus ändert sich ja dynamisch, bei entsprechend kleiner Auflösung und kleinem Bildschirm hast du dann auch mal 3 Zeilen Menu.

Außerdem könnte man ja keine Unterkategorien mehr anklicken, da die Maus beim Versuch nach unten zu kommen immer über eine andere Hauptkategorie fahren würde und diese aktivieren würde.

Es gibt zahlreiche Menu-Module auf dem Markt, mit denen du - für deine Anwendung - bessere Ergebnisse erzielen kannst.

Grüsse
Whiley

Vielen Dank

Genau nach dieser Lösung habe ich gesucht.

Link to comment
Share on other sites

  • 1 year later...

Hallo zusammen,

nach langer Zeit musste ich ein mal wieder den Shop neu aufsetzen.
Nun sind wir bei der Version 1.7.8.8 und es gibt hier anscheinend die global.css nicht mehr.
Wie bekommt man die Änderung denn bei der 1.7 angepasst?
Die Anpassung für die Position des .tabs habe ich ha in der custom.css vorgenommen.

Gruß Nico

Link to comment
Share on other sites

Zwischen none und !important muß ein Leerzeichen stehen.

Möglicherweise müssen nach der Änderung Prestashop- und / oder Browser-Caches gelöscht werden.

In welcher Datei welche CSS-Anweisungen stehen, findest du mit der in den meisten Browsern per Rechtsklick aufrufbaren "Untersuchen"-Funktion heraus, ggf. vorher das CSS-Caching deaktivieren. Du kannst dann entweder direkt die entsprechende Datei bearbeiten oder (besser) die Anweisung in die custom.css schreiben.

Link to comment
Share on other sites

Danke für die Info.
Hatte es gestern dann auch hin bekommen.
Da ich auch die Produktbeschreibung über den ganzen mittleren Bloch haben wollte, habe ich die .tabs auch angepasst.
Hier gibt es aber in der mobilen Ansicht Probleme.
Das Menü klappt nicht auf und die Beschreibung geht links aus dem sichtbaren Bereich raus.
Kann man die Änderungen für mobile Ansicht ausschalten? 

 

Gruß

Nico

Link to comment
Share on other sites

Ich meine, dass du Anweisungen auf bestimmte Bildschirmauflösungen beschränken kannst, also z. B. so dass sie nicht für kleine Bildschirme von Handys wirken. Davon wird in den originalen CSS-Dateien von Prestashop auch öfters Gebrauch gemacht. Wenn du Elemente nur prozentual verkleinerst kann das schließlich dazu führen, dass sie auf einem Handy-Bildschirm kaum noch zu erkennen sind.

Link to comment
Share on other sites

das habe ich nun alle hin bekommen.

Ich verstehe nur nicht, weshalb manche Befehle aus der custom.css nicht im Browser umgesetzt werden.
Man bekommt die Änderung in der Konsole umgesetzt, jedoch wird diese dann nach dem Upload der custom.css nicht so verarbeitet.
in meinem Fall will ich ein mal wieder die Überschrift im Slider verkleinern:

.carousel .carousel-item .caption .display-1 {
    font-size: 2rem;}

Wird aber nicht umgesetzt.
Es wundert mich sowieso, weshalb .display-1 mehrfach in der theme.css verarbeitet wird, wie es aus der Konsole zu erkennen ist:

Zitat

 

.carousel .carousel-item .caption .display-1 {
    font-size: 2rem;
    font-weight: 700;
}
.text-uppercase {
    text-transform: uppercase !important;
}
.display-1 {
    font-size: 3.125rem;
    font-weight: 600;

 

Die Werte bei .display-1 sind dabei durchgestrichen, was man nach dem Einfügen des Codes hier nicht sieht.

Gruß Nico

Link to comment
Share on other sites

Es gibt in CSS eine Prioritisierung. Je spezifischer eine Klasse/ID angesprochen wird, je höher die Priorität. Zusätzlich kann diese Priorität mit !important übersteuert werden. Dies siehst du entsprechend im Inspektor im Browser (durchgestrichen da durch andere Anweisung übersteuert). Da deine Anweisung spezifischer ist sollte diese aber Prio haben, zeig doch mal einen Screenshot aus dem Inspektor wodurch hier die Schriftgröße betimmt wird.

Link to comment
Share on other sites

Ja, da gibt es einige Dinge, die so nicht nachvollziehbar sind.
Ich musste mir auch die Artikelbeschreibung anpassen, da kein Mensch eine Artikelbeschreibung in der rechten schmalen Spalte benötigt, wenn der Text dann über 30 zeilen nach unten geht.
Das ist nur für die mobile Ansicht gut.
Aber man kommt ja mit der Hilfe im Forum immer ein Stück weiter.

Link to comment
Share on other sites

3 hours ago, Don Cappello said:

Hoffe ich habe das korrekt abgebildet.

Screenshot 2023-01-29 104233.jpg

Ja ist richtig, man sieht keine Anweisung aus der custom.css, nur die Standard Anweisungen aus der theme.css. Prüfe ob die custom.css geladen ist und falls ja die aktuelle Version oder alt aus einem Cache

Link to comment
Share on other sites

vor 2 Stunden schrieb JBW:

Prüfe ob die custom.css geladen ist und falls ja die aktuelle Version oder alt aus einem Cache

Cache habe ich mehrmals über das Backend geleert.
Wie man die aktual geladene Version der css sehen kann weiß ich leider nicht.

Vielleicht liegt es ja auch an meinem Text in der css:

.carousel .carousel-item .caption .display-1 {
    font-size: 1.5rem;
    font-weight: 700;
}

@media (min-width: 768px) {
.tabs {
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    margin-top: 2rem;
    background: #fff;
    padding: 1.25rem 1.875rem;
    margin-left: -100%;
}
}

@media (max-width: 767px) {
.tab { margin-left: 0px;
}
}

Gruß Nico 

Link to comment
Share on other sites

Hallo,

 

ich habe mir ein mal Das Demo vom Prestashop angesehen.
Dort wird das Top-Menü ordentlich angezeigt.
Auch die Unterkategorien werden beim Aufklappen unter die Hatpkategorien gesetzt und nicht überauf die Hauptkategorien.
Weshalb klappt das bei der Installation des classik Themes denn nicht genau so?
Ist da vielleicht schon etwas überarbeitet worden, damit das korrekt funktioniert?

Gruß

NICO

Link to comment
Share on other sites

vor 44 Minuten schrieb Don Cappello:

Hallo,

 

ich habe mir ein mal Das Demo vom Prestashop angesehen.
Dort wird das Top-Menü ordentlich angezeigt.
Auch die Unterkategorien werden beim Aufklappen unter die Hatpkategorien gesetzt und nicht überauf die Hauptkategorien.
Weshalb klappt das bei der Installation des classik Themes denn nicht genau so?
Ist da vielleicht schon etwas überarbeitet worden, damit das korrekt funktioniert?

Gruß

NICO

Also entweder wen du dich auskennst dein Eigenes Menu Einbauen oder du Kaufst ein Modul Dafür

https://addons.prestashop.com/de/menu/53204-pretty-menu-advanced-menu-builder.html

Link to comment
Share on other sites

vor 8 Minuten schrieb SliderFlash:

Also entweder wen du dich auskennst dein Eigenes Menu Einbauen oder du Kaufst ein Modul Dafür

Aber ich nutze doch das classik und dort funktioniert es ohne sich zu überlappen.

Demnach dürfte es auch in meinem neu erstellen Shop funktionieren.

Ich habe ja keine wesentlichen Sachen verändert.

Link to comment
Share on other sites

 

Ich konnte das Problem nun lösen.

In der  Demo wurde der Wert top: 0; durchgestrichen, also deaktiviert.
Ich habe den Wert in der custom.css nun auf Auto gesetzt und somit wird das Untermenü schön sauber unter dem Hauptmenü aufgeklappt und bedeckt dieses nicht mehr.
Fragt man sich doch, weshalb in der Version zum Download dieser Punkt nicht so übernommen wird.

.popover {
    position: absolute;
    top: AUTO;
  • Thanks 1
Link to comment
Share on other sites

vor 11 Stunden schrieb Don Cappello:

In der  Demo wurde der Wert top: 0; durchgestrichen, also deaktiviert.

Das stimmt so nicht, man kann keine CSS-Anweisungen durchstreichen, das macht nur der Inspektor im Browser und zwar weil diese Anweisung durch eine CSS-Anweisung direkt im Element-Code überschrieben wird (<div class="popover ..." ... style="top: 40px;">).

Link to comment
Share on other sites

vor 7 Stunden schrieb rictools:

Das stimmt so nicht, man kann keine CSS-Anweisungen durchstreichen, das macht nur der Inspektor im Browser und zwar weil diese Anweisung durch eine CSS-Anweisung direkt im Element-Code überschrieben wird (<div class="popover ..." ... style="top: 40px;">).

ja, das verstehe ich.
Nur ist das ja so in der frischen Installation so und hat auch damals in der 1.6 dafür gesorgt, dass sich das Untermenü über das Hauptmenü legt.
Dadurch die Anweisung top: AUTO; ist es perfekt.
Es gibt da aber noch einige Dinge die nicht funktionieren, wie du ja in meinem Beitrag von gestern gelesen hast.
Bilder werden beim Anklicken nicht vergrößert und es wird auch nur das 1. Bild angezeigt.
2. Bild bleibt auch beim Anklicken im Vorschaumodus,

Link to comment
Share on other sites

Also das ist bei dir alles sehr seltsam. Handelt es sich wirklich um eine frische Neuinstallation? Wurde in die Datenbank etwas importiert?

Ich würde auf jeden Fall einmal den Ordner var/cache leeren. Und noch einmal genau überprüfen, nicht dass dein Provider an der PHP-Version rumgeschraubt hat.

Link to comment
Share on other sites

Moin,

bin bei Alfahosting und die Installation vom Hoster selbst ist 3 x fehlgeschlagen.
Also habe ich alles gelöscht, DB neu angelegt und per Upload der Installationsdatei manuell installiert.
Demnach dürfte da gar nichts altes vorhanden sein.
Ich versuche es ein mal mit deinem Tipp und wenn das auch nix bringt, muss ich eben noch ein mal alles von Grund auf neu installieren.

Gruß Nico

Link to comment
Share on other sites

  • 1 month later...
Am 29.1.2023 um 4:50 PM schrieb Don Cappello:

Hallo zusammen,

habe da noch eine kleine Frage zur custom.css.

Ich möchte den Hintergrund zum contact-link anpassen.
Dies funktioniert im Browsertool auch problemlos.
Nur nimmt der Shop die Änderung per custom.css nicht.
Andere Änderungen werden ja übernommen.
Cache wurde auch gelöscht:

div#contact-link {
    background-color: aqua;
}

Gruß Domenico

Link to comment
Share on other sites

Für eine neue Frage öffne doch möglichst einen neuen Thread, sonst wird's schnell unübersichtlich!

Funktioniert auch eine danach stehende Anweisung in der custom.css (sonst könnte davor ein Syntax-Fehler sein)?

Evtl. könnte auch ein Link zum Shop helfen.

Link to comment
Share on other sites

Hallo,

ja, ich werde in Zukunft neue Themen öffnen.

War mir nur nicht sicher, ob das wegen dem gleichen css neu erstellt werden soll.

Andere  Anweisungen greifen hier.
Anbei der Link zum Shop:
www.don-cappello.de

Will auch diese Standardschrift ändern, da ich diese für sehr unleserlich halte.
Daher nun erst ein mal sehen, weshalb die Anweisung nicht greift.

Gruß Domenico

Link to comment
Share on other sites

Gerade eben schrieb rictools:

Die Anweisung funktioniert, allerdings nicht aqua, sondern lightyellow, evtl. ist bei dir noch etwas im Browser-Cache.

 

Ja, das habe ich jetzt in einem neuen Browser-tab auch bemerkt.
Anscheinend werden die Änderungen im Chrome-Browser trotz Aktualisierung nicht neu geladen.
Da kann ich ja noch lange herumbasteln 😁

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...