mainMenu - breadcrumb - userPanelItems verschieben

Moin Zusammen

Ich würde gerne das Menü die breadcrumb wie auch die userPanelItems verschieben so wie auf dem Screenshot zu sehen ist. Wie wäre sowas umsetzbar?

Danke für eure Unterstützung, gruss Grischabock

Quote from norse

Die userPanelItems sind doch von Haus aus oben rechts. Was soll daran geändert werden?

Der gesamte aufbau

userPanelItems (oben rechts, am besten mit einem halbtranspareten hintergrund)

mainMenu (ganz unten am header überhalb der breadcrumb)

breadcrumbs (unterhalb dem Header / mainMenu)

Es geht dabei erstmals um die Anordnung der Elemente, center muss eigentlich "vorerst" mal nichts gesetzt sein. Die userPanelItems sollen halt auch nicht über die gesamte länge gehen sondern am liebsten nur wie auf bild der grüne Teil.

Ich weiss nicht was es daran nicht zu verstehen gibt.

Anbei noch ein Bild was nicht auf Farben mit Texten basiert sondern auf Bilder, hoffe so versteht man es. Mehr kann ich nicht mehr machen. Der nächste Schritt wäre dann ein Video zu malen...

Es muss ja auch nicht diskutiert werden welcher teil den schon am richtigen platz ist und welcher nicht. Das bringt mir ja nichts wenn du mir sagst das userpanel ist am richtigen ort. Ja das sehe ich das es am richtigen ort ist aber das Menü soll nach unten und das userpanel soll einen halbtransparenten Hintergrund bekommen.

Danke gruss Grischabock

Quote from norse

Ich kann es auch lassen, Dich verstehen und Dir danach helfen zu wollen.

Gruß norse

Display More

Das wäre deine freie entscheidung ?

Wenn du lust hast zu helfwn dann gerne, aber ich kann meine idee nicht weiter als in texte und bilder fassen.

Danke Fu55el für deine Antwort.

Hab noch zwei drei sachen die ich nicht hinbekomme, evt. weiss ja jemand Rat.

Die Icons oben rechts hätte ich gerne etwas kleiner, wenn ich diese aber mit width und height verkleinere dann verzieht es alles.

Die Navigation wird ja abgeschnitten weil ja die Icons oben rechts so weit raus kommen, kann man das umgehen da ich die ganze breite nutzen kann für die Menüpunkte?

Die breadcrumb Leiste hätte ich gerne etwas schmäler und eine feinere Schrift, jedoch wenn ich die höhe anpasse dann ist die Schrift abgeschnitten.

Habe mal ein Screenshot angehängt um es Bildlich vorstellen zu können, ansonsten hier der Link https://www.grischabock-design.ch

Danke gruss Grischabock

Die Mobile Version sieht etwas komisch aus

/* =================================================================== Header =========================== */
.pageHeaderContainer {
    z-index: 100;
    padding-top: 20px;
    height: 300px;
    background-position: center top;
    background-color: rgb(44, 66, 89);
}
.pageHeaderPanel {
    position: absolute;
    top: 250px;
}
.pageHeaderLogo {
    flex: 1 1 auto;
    position: relative;
}
.pageHeaderLogoLarge {
    max-width: 100%;
    opacity: 0.8;
}
.pageHeaderLogoLarge:hover {
    max-width: 100%;
    opacity: 1;
}
/* ==================================================================== UserPanel ========================== */
.userPanel {
    position: relative;
    top: -220px;
}
.userPanel > ul > li > a {
background: rgba(36, 66, 95, 1);
    margin-left: 10px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 12px;
    -o-border-radius: 0px;
    -ms-border-radius: 0px;
    opacity: 0.5;
    box-shadow: 0px 0px 0px;
    border: solid 1px #eceff1;
    font-size: 12px;
}
.userPanel > ul > li.dropdownOpen > a, .userPanel > ul > li.open > a, .userPanel > ul > li:hover > a {
background: rgba(36, 66, 95, 1);
    opacity: 1;
}
.interactiveDropdown {
    top: 105px !important;
    position: absolute;
}
.pageHeaderSearch {
    position: absolute;
}
.pageHeaderSearchInputContainer {
    opacity: 1.0;
    position: relative;
    top: 55px;
}

.pageNavigation {
    font-size: 10px;
    height: 10px;
    position: relative;
}

Ich habs jetzt einfach gelöst mit

@include screen-lg

Klappt wunderbar

@include screen-lg {

Hier dein Code rein ->

}

somit wird das nur für Geräte sichtbar ab 1025px

https://docs.woltlab.com/view_css.html