Hamburger Button rechts ausrichten mit zusätzlichen hintergrund
-
-
Ich würds über flex mit flex-end lösen.
-
Arne Drews -danke
-
Arne Drews -> also ich bekomme das nicht wirklich hin ... ich habe mal jetzt die datei hochgeladen
unter: http://og-elbbruecke.de/testumgebung/menu.html
Ich will das das Logo links in der mobilen ansicht angezeigt wird und rechts daneben dann der hamburger button.
-
Verzichte auf float und die Vielzahl der Mediaqueries. Lege das Logo und die Nav in einen Container. Gib diesem display: flex; und justify-content: space-between; Dann wird das Logo links und die Nav rechts angeordnet.
-
danke, habe ich gemacht trotzdem bleibt es so wie es ist ....
habe ne neue css datei angelegt flexheader.css und darin dann
den inhalt geschrieben des containers:
Code.flexheader { display: flex; flex-wrap: wrap; justify-content: space-between; background-color: #fff; } .flexheader > div { background-color: #fff; width: 620px; }
-
Du hast den beidern Divs in .flexheader ein relativ große Breite gegeben, so dass es zum Zeilenumbruch kommt. Wenn ich die Breite deaktiviere, werden Logo und Burger nebeneinander angeordnet:
-
ja super .... hat geklappt !!!!
DANKE DIR !!!
NOCH NE SCHÖNE WOCHE !
-
so leider habe ich jetzt n weiteres problem wenn man auf den hamburger button raufdrückt springt dieser wieder nach links also verschiebt sich das wieder so wie davor... wollte das im toggle machen (in der menu.css) mit display : flex; doch da reagiert er nicht
also das das menu auch dort rechts aufklappt...
-
Wie so häufig ist hier auch ein float die Ursache des Übels. Wenn ich es deaktiviere ist alles OK:
html-seminar.de/woltlab/attachment/1937/
Die Anordnung nebeneinander/untereinander kann man viel besser mit Flex steuern.
-
danke hat geklappt!!!
-
so jetzt habe ich das mal alles angepasst und hier nochmal hochgeladen...
leider spinnt jetzt die desktop anzeige
da springt das menu jetzt hoch nachdem ich die
zeile /*float: left; */ auskommentiert habe....
-
Teste 2 Änderungen:
1. Lösche das top: 50px; bei nav ul ul
2. setze position:absolute; für nav ul ul li
-
-
so ich habe es jetzt gemacht jetzt überdeckt in der mobilen ansicht wenn mann auf den "unser nemu" (was ein untermenu punkt hat) punkt geht den nächsten hauptmenupunkt anstatt es weiter aufzuklappen so das alles runterrutscht () und alles sichtbar ist.
ps: kann auch screenshots hochladen zum besseren verständnis!
-
Das liegt daran, dass Du das Untermenü absolut positioniert hast. Wenn ich das wegnehme, überdeckt es nicht mehr, sondern die anderen Punkte rutschen herunter:
html-seminar.de/woltlab/attachment/1946/
Falls Du die abs. Pos. für die Desktop-Ansicht brauchst, kannst Du sie ja mit einer Mediaquery bedingt machen.
-
Scheint an der Formatierung von
zu liegen.
Versuche her mal position: relative;.
Bedenke aber - auf deiner Testseite formatierst du alles nur mit den Selektoren der reinen HTML Elternelemente. Ich denke es wäre besser, wenn du, auch in Hinsicht auf eine spätere Erweiterung der Seite, bei den Elementen, die gesonderte Formate bedürfen, eine CSS Klasse nutzt zB <li class="sub_menue">, damit du gezielter Formate im CSS vergeben kannst.
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!