Mobiles Menü auch auf Desktop anzeigen, Amsterdam

15.02.2021 21:49
#1
Ki

Hi. Ich möchte im Design Amsterdam das mobile Menü gerne auch auf allen grossen Desktop Ansichten (grösser als 959) anzeigen lassen. Ich habe es in der Chrome Konsole auch geschafft, wenn ich die Media queries dann in Jimdo einfügen geht es nicht, andere css Anpassungen funktionieren ohne Probleme. Vielleicht hat ja jemand einen Tipp für mich.

Danke!


 Antworten

 Beitrag melden
16.02.2021 06:09
avatar  az_
#2
avatar
az_

URL?


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
16.02.2021 07:20
#3
Ki

Sorry. bp-lintig.jimdofree.com wird geupdatet zu pro wenn fertig


 Antworten

 Beitrag melden
16.02.2021 09:07
#4
Ki

OK. Also ich habe es, wie gesagt, im Crome, hin bekommen - bei Jimdo ändert sich gar nix bei den Mediaqueries. Andere Anpassungen sind kein Problem.

ich möchte das desktop navi ab 0px ausstellen. Weil crome bei dem Wert 0 meckert habe ich mal 1 genommen:

@media (min-width: 1px)
.jtpl-navigation {
display: none !important;
}


funktioniert.

Nun muss ich die mobilen Elemente ab 1px anzeigen lassen

@media (max-width: 1px)
.jtpl-navigation__label {
display: none;
}

@media (min-width: 1px)
.jtpl-topbar {
min-height: 50px;
background-color: #333;
background-color: rgba(51,51,51,0.5);
}



@media (max-width: 1px)
.jtpl-mobile-navigation {
display: none !important;
}


warum nimmt Jimdo meine Anpassungen nicht? Selbst das Desktop Menü nur auszublenden - also der erste Befehl ganz alleine für sich, übernimmt er schon nicht :-(


 Antworten

 Beitrag melden
16.02.2021 10:48 (zuletzt bearbeitet: 16.02.2021 11:00)
avatar  az_
#5
avatar
az_

...ohne da jetzt inhaltlich groß einsteigen zu können - aus Zeitgründen (tml):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 

 
@media (max-width: 1px)
.jtpl-navigation__label {
display: none;
}
 
@media (min-width: 1px)
.jtpl-topbar {
min-height: 50px;
background-color: #333;
background-color: rgba(51,51,51,0.5);
}
 

 
@media (max-width: 1px)
.jtpl-mobile-navigation {
display: none !important;
}
 

 
 




....da sind ein paar fette Fehler drin.

1.) media-Queries müssen immer eingeklammert sein, genau wie die Anweisungen.

...korrekt schreibst Du:

1
2
3
4
5
6
7
8
9
10
 
@media (min-max-Bedingung) {
 
/*hier der CSS Code*/
 
selector1 {anweisung: Wert}
selector2 {anweisung: Wert}
selector3 {anweisung: Wert}
/*...etc
 
}
 



2.) ...was soll eine Fensterbreite von @media (max-width: 1px) ? Das macht nicht wirklich Sinn, oder? @media (min-width:1px) funktioniert logisch, weil wirksam auf alles größer 1px - wäre aber auch völlig unnötig, weil <1 gibt es eh nicht und alles ist >1px

Da Du die mobile Ansicht über alle Breiten haben willst, kannst Du die Querie eigentlich auch ganz weglassen. Schau aber mal, ob Jimdo eine Querie benutzt für die Umschaltung - dann nimmst Du genau diese. In Deinem Beispiel wäre es glaub ich @media (min-width:1170px) {...}

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
16.02.2021 17:12
#6
Ki

Hi und danke für deine Antwort,

ich habe die fehlenden Klammern nun hinzugefügt und - welch Wunder - ich sehe Veränderungen.

Und ja, ich habe es auch mit den min und max lösen können - aber eher auf die unlogische und vermutlich nicht ganz saubere Art und Weise.

zu deinem:

@media (min-width:1170px) {...}

Bei mir schaltet das Menü bei größer als 959px um.

Im Grunde brauche ich doch nur zwei Anweisungen.

1. display none - desktop menü
2. display immer - mobiles menü.

Beim mobile menü gibt es aber mehrere Elemente, die ich verändern muss.

In dem Design gibt es navigation.sass und mobile-navigation.sass

Beides bekomme ich, wie gesagt mit meinen min und max angaben mit 1px hin - aber mit deinem Tipp die Queries dafür ganz auszuschalten komme ich nicht weiter... :-(


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!