Brauche eure Hilfe bei Nav-Menü Anpassung

  • Hallo liebe Forumer,


    ich benötige dringend eure hilfe bei der Anpassung eines Menüs.


    Hierum geht es. Also bei Opera und Chrome sieht es soweit gut aus, nur halt im Firefox und Edge gibt es Probleme.

    Wenn man dort also das Bildschirmfenster ganz schmal macht wie hier:


    Ich komme dort nicht weiter, es ist mir zu kompliziert und mir raucht der Kopf vom experimentieren,

    Ab diesen Punkt, also @media screen and (max-width: 28.125em) {

    soll dieses Menü immer schmaler werden bis eben das Browserfenster nicht mehr schmaler zu machen geht, probiert es selbst aus:

    Der Bottons sollen in die nächste Zeile rutschen und mittig angeordnet sein.

    Der Links sollen sich, klar, umbrechen wenn sie zu lang sind (also: Aktuelles, Arbeiten ... ) , gerade im Edge ist das nötig.

    Bisher habe ich alle kombinationen von width /maxwidth 100%; & auch auto, ausprobiert aber keine Wirkung gezeigt.

    Was ist da nötig?


    Lieben Gruß der misanthrop

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von einsiedler ()

  • Nee, es geht darum dieser "Zustand" (auf dem jpg) ist der letzte, der noch O.K. ist, wenn man aber (im Firefox) noch weiter zusammenschiebt bis es nicht mehr geht, soll dieser Übergang noch flüssiger vonstattengehen (beim zusammenschieben). Ich habe hier max-width: 100% & auto , aber die Navi ist nicht bis zum Rand, rechts und links , da sind Abstände.

    ---

    Es soll so sein das bei @media screen and (max-width: 28.125em) {  die Navi 100% breit ist/sich fügt und dann eben mit dem weiteren schmaler werden auch schmaler wird.

    ---

    Darum geht es mir und ich hab vor lauter experimenten keine Idee mehr wie es gehen könnte.

    Deshalb benötige ich eure Hilfe.


    der misanthrop

  • Das Element mit der Klasse "contentspan" hat noch einen margin, wodurch verhindert wird, dass alles innerhalb dieses Elements den Rand erreichen kann.

  • Nope, es scheint so, das es nicht am "contentspan" liegt, sondern eher an "nav#main-nav" das das eben nicht die volle Breite von 100% annimmt.

    Sagt mir etwas anderes, woran liegt es, kann den Fehler echt nicht finden.




    Mit der Bitte um dringende Mithilfe


    der misanthrop

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von einsiedler ()

  • [Blockierte Grafik: https://ibb.co/TqX1xVY]


    Bei mir klappt es.


    Es liegt ganz sicher an dem contentspan Container, wenn ich die Navi daraus entferne, passt sie sich den Rändern an, auch bei einer größeren Breite.

    Dadurch dass der Container eine Flexcontainer ist, wird das Element eingeengt.

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von DER ()

  • also bei @media screen and (max-width: 28.125em) {...

    Code
    1. #main-nav {
    2. flex-grow: 1;
    3. flex-shrink: 1;
    4. flex-basis: auto;
    5. max-width: 100%;
    6. align-self: center;
    7. }

    Dort alles was flexbox ist weg...



    Code
    1. nav > ul ul.group,
    2. nav > ul ul.group > li {margin:0; padding:0; display:block;}
    3. nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
    4. nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
    5. nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
    6. nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}



    Das also auch weg und was ist jetzt mit contentspan?


    Die gestrichelte grüne Linie umschließt contentspan (hab ich contentspan als Rand gegeben) , rechts und links sind 0.3em Abstand zu den äußeren Rändern, die wohl nicht viel bewirken.

    Denn beim minimalsten zusammenschieben des Bildschirmfenster gibt es rechts und links anständig diesen 0.3em Rand.


    Daran ligt es wohl nicht, der fehler spielt sich innerhalb von contentspan ab. #main-nav dehnt sich nicht maximal bis zum contentspan aus.

    Entweder gibt es ein verstecktes padding bei contentspan oder bei #main-nav stimmen die flexbox Angaben nicht.

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von einsiedler ()

  • Nein... Lass die anderen Elemente inruhe, nur die Klasse "contentspan" verursacht das Problem. Also ganz vorgekaut:


    Code
    1. .contentspan {
    2. display: inital;
    3. margin: 0px;
    4. }

    Das wäre ein Lösungsansatz, dann allerdings hast Du aber auch andere Probleme, die dir vielleicht nicht gefallen. Da bleibt es bei dir, wie Du die lösen willst.