mainMenu Anpassungen

  • Hallo,

    Bin momentan am Thema Anpassungen vom MainMenu, soweit so gut viel rumprobiert in Chrome aber ich verschiebe das ganzeMenu bzw den grünen Streifen. Ich habe im Bild markiert was wie soll vielleicht mag mir ja jemand helfen.

    ..aber gut das wir darüber sprachen.

    Unkl.

  • CSS
    .boxMenu > li > a.boxMenuLink {
        border-radius: 15px;
    }

    Die Reihenfolge von Menü und Logo müsstest du vermutlich im Template tauschen.

    So ist es. Im Template "pageHeader" genauer gesagt.

    Hier mal meine Lösung (wird aktuell auch bei einem meiner Stile genutzt):

    Einfach eine neue Template-Gruppe erstellen und dann das Template dort hinein kopieren oder eben neu anlegen.

  • Die Reihenfolge von Menü und Logo müsstest du vermutlich im Template tauschen.

    Nicht unbedingt. Das geht durchaus auch via CSS (falls ich Unkl. richtig verstehe). Kommt drauf an, wie es am Ende genau aussehen soll. Siehe das folgende Bild. Das ist via CSS umgesetzt.


    Unkl. Nur zum Verständnis, da deine Angaben (zumindest für mich) teilweise nicht wirklich eindeutig sind. Meinst du es so?

    So verstehe ich zumindest deine Beschreibungen. Wenn du was anderes meinst, würde ich es noch anpassen.

    Allerdings überlege ich eh noch, wie ich dich da zielführend anleitend könnte, ohne dir direkt den ganzen Code zu geben. Damit du wieder etwas lernst.

  • Ja genau so meine ich es nur das die Buttons unten auf der Navigation aufsitzen auf der linie und der aktive Button ist dann immer der der größer ist bzw. auch wenn man drüber hovert.

    ..aber gut das wir darüber sprachen.

    Unkl.

  • Ok, ich hab das mal entsprechend angepasst.

    Gehen wir das mal Schritt für Schritt durch. Also eine Aufgabe nach der anderen.

    Du willst ja hauptsächlich das Hauptmenü verschieben. Also fängst du auch damit an. Den Code gebe ich dir jetzt einfach mal:

    CSS
    .pageHeaderPanel {
        position: absolute;
        top: 120px;
    }

    Durch das position: absolute ist es nicht mehr fixiert, sondern scrollt mit der Seite mit. Ich denke zumindest, dass das so gewollt ist. Ansonsten streiche das einfach. Und das top: 120px schiebt das ganze (im Standard-Stil) genau so weit runter, dass es exakt über der pageNavigation liegt. Natürlich kannst du die 120px auch durch einen eigenen Wert ersetzen.

    Allerdings würde der oben genannte Code Probleme bei der mobilen Darstellung verursachen. Also gehen wir auf Nummer sicher und sorgen dafür, dass er nur bei der Desktop Darstellung greift. Dafür packen wir folgendes um den Code herum:

    CSS
    @media (min-width: 1025px) {
        
    }

    Sieht dann am Ende also wie folgt aus:

    CSS
    @media (min-width: 1025px) {
        #pageHeaderPanel {
            position: absolute;
            top: 120px;
        }
    }

    Und das am besten auch bei ALLEN noch folgenden Dingen tun, damit alle Änderungen wirklich nur bei der Desktop Darstellung greifen.

    Jetzt liegt das pageHeaderPanel (also Hauptmenü & Co) allerdings über dem Headbanner / Logo und verdeckt das etwas. Das liegt daran, dass der Bereich von Logo / Banner nicht ganz oben anfängt, sondern von Haus aus nach unten verschoben wurde, damit oben Platz für das Hauptmenü frei bleibt. Diese standardmäßige Verschiebung müsstest du jetzt entfernen bzw auf 0 setzen, da das Hauptmenü oben ja jetzt keinen freien Platz mehr braucht. Jetzt kann Logo / Banner direkt ganz oben positioniert sein.

    Fang einfach mal ganz oben beim pageContainer an und arbeite dich dann nach und nach durch die einzelnen Elemente durch, bis du dort eine Verschiebung nach unten entdeckst. Und diese dann auf 0 setzen. Wenn du das geschafft hast, einfach bescheid sagen und sagen, wie genau du es gelöst hast. Dann machen wir den nächsten Schritt.

    Du kannst aber natürlich auch schon den Rest weiter versuchen. Vielleicht kommst du ja auch ganz von selbst drauf. Immer nur einen Schritt nach dem anderen und dann ist das plötzlich gar nicht mehr soo schwierig ;)


    Am Ende werde entweder ich oder Unkl. oder wer auch immer dann nochmal den finalen Code hier komplett rein posten, falls das nochmal jemand suchen sollte. Dieses stückchenweise Vorgehend ist jetzt halt nur zum Lernen für Unkl. gedacht.

  • Also ich habe Ihn jetzt zum verschwinden gebracht mit dem folgenden Code so hängt zumindest das .pageHeaderPanel nicht mehr im Logo und zwar mit folgendem Code:

    Code
    .pageHeaderContainer {
        color: rgba(255, 255, 255, 1);
        z-index: 100;
        padding-top: 0px;
    }

    ..aber gut das wir darüber sprachen.

    Unkl.

  • Sehr gut ;) Das color und z-index kannst du natürlich streichen. Es geht da nur um das padding-top.

    Als nächstes könnte man schauen, dass der aktive Menüpunkt größer dargestellt wird. Dazu klick mal auf den aktiven Menüpunkt und untersuche diesen mit den Browsertools bzw vergleiche mal die li-Elemente aller Menüpunkte. Dir wird auffallen, dass das li-Element beim aktiven Menüpunkt eine zusätzliche CSS Klasse hat. Dadurch kann man gezielt den aktiven Menüpunkt ansprechen:

    Normaler Menüpunkt:

    .mainMenu .boxMenu > li > a

    Aktiver Menüpunkt:

    .mainMenu .boxMenu > li.XXXXXX > a

    Das XXXXXX musst du dir nur heraussuchen. Das ist die zusätzliche CSS Klasse, die ich angesprochen habe.

    Wenn du dann soweit bist, dass du den aktiven Menüpunkt gezielt ansprechen kannst, kannst du z.B. dessen Höhe und Breite ändern. Ich hatte als Test bei meinem Beispiel die Höhe geändert und für die Breite (falls die überhaupt geändert werden soll) das Padding erhöht, weil die Menüpunkte ja keine feste Breite haben. Also mit width arbeiten wäre hier nicht so praktisch.

    Du kannst natürlich auch ganz anders vorgehen. Hauptsache du bearbeitest den Menüpunkt so, wie du ihn gerne hättest.

    Danach einfach wieder bescheid sagen. Es gibt noch ein paar Punkte auf der Liste.

  • Also folgendes habe ich jetzt ausgearbeitet um die Menüpunkte anzupassen:

    Code
    .mainMenu .boxMenu > li > a {
        align-items: center; 
        display: flex;
        height: 38px;
        padding: 0 18px;
        border-color: black;
        border-radius: 7px;
    }

    Right? :)

    ..aber gut das wir darüber sprachen.

    Unkl.

  • Right?

    Wenn es so angezeigt wird, wie du es haben möchtest, dann ja.

    Hast du auch den aktiven Menüpunkt bearbeitet? Also falls du das nicht verworfen haben solltest.


    Edit:

    Das border-color: black dürfte so alleine jedoch keine Auswirkungen haben. Da würde noch border-style und border-width fehlen. Oder in Kombination alles zusammen z.B. border: 1px solid black.


  • So Sieht es bis jetzt aus, ich bekomme das aber nicht mit der Größe hin bin als am probieren mit height aber das funktioniert irgendwie nicht. :(

    ..aber gut das wir darüber sprachen.

    Unkl.

  • Wie versuchst du denn den aktiven Menüpunkt anzusprechen? Wie du das herausfindest, hatte ich dir ja schon beschrieben. Also falls das mit dem height jetzt darauf bezogen war.

  • Angesprochen wird er so:

    Code
    .mainMenu .boxMenu > li.active > a, .mainMenu .boxMenu > li:hover > a

    Wenn ich es richtig verstanden habe.

    ..aber gut das wir darüber sprachen.

    Unkl.

  • ja, genau. Wobei nur das bis zum , zählt. Das danach würde ich streichen, da du sonst die Höhe bei allen Menüpunkten ändern würden, wenn du mit der Maus darüber fährst. Also nur .mainMenu .boxMenu > li.active > a nutzen.

    Und wie genau ist der Code für die Höhe, den du versuchst?

  • Und wie genau ist der Code für die Höhe, den du versuchst?

    das ist folgender:

    Code
    .mainMenu .boxMenu > li.active > a {
        height: 7px;
    }

    aber damit mache ich den Button ganz klein.

    EDIT:

    Habe es jetzt so gemacht:

    Code
    .mainMenu .boxMenu > li.active > a
       
        min-height: 50px;
    }

    ..aber gut das wir darüber sprachen.

    Unkl.

    Edited once, last by Unkl. (August 12, 2017 at 10:25 PM).

  • Naja, deine normalen Menüpunkte haben einen Höhe von 38px und dein aktiver Menüpunkt soll (soweit ich dich verstanden hatte) größer sein. Also muss die Höhe auch größer sein als 38px und nicht kleiner.

  • Habe es jetzt so angegeben:

    Code
    .mainMenu .boxMenu > li.active > a
       
        min-height: 50px;
    }

    Edit:

    Ich glaube so ist es besser oder ?

    Code
    .mainMenu .boxMenu > li.active > a, .mainMenu .boxMenu > li:hover > a {   
       
        height: 50px;
        font-size: 18px;


    Bin schon mal sehr stolz auf mich nach langem rumprobieren sieht es jetzt so aus, hier für eine Live Ansicht:

    http://technix-for.me <-- Finde es schon cool :)

    habe aber gemerkt das er diese Schrift nicht anzeigt in allen browsern bei meinem mac z.B zeigt er es nicht an.

    Edit: erledigt, mit diesem Link --> @import url(https://fonts.googleapis.com/css?family=Bangers);

    ..aber gut das wir darüber sprachen.

    Unkl.

    Edited 4 times, last by Unkl. (August 12, 2017 at 10:47 PM).

  • Dürfte mit min-height zwar funktionieren, aber wieso nicht einfach height? Dürfte das selbe Ergebnis liefern und wäre eigentlich logischer. Dir fehlt übrigens eine {.

    Naja, egal. Weiter im Text.

    Als nächstes könntest du dafür sorgen, dass die Menüpunkte nicht nach oben hin, sondern nach unten hin ausgerichtet werden, so wie du es haben wolltest. Dafür gebe ich dir einfach mal den Code:

    CSS
    .mainMenu .boxMenu {
        align-items: flex-end;
    }

    Und dann fehlen eigentlich nur noch zwei Dinge:

    1. Nochmal sicherstellen, dass die pageNavigation unter dem Hauptmenü richtig positioniert ist (weil ja jetzt an der Höhe vom Hauptmenü geschraubt wurde). Ansonsten die pageNavigation entsprechend hoch oder runter schieben.

    2. Mal testweise die Dropdowns vom Userpanel öffnen. Die dürften jetzt zu weit oben platziert sein, weil das userPanel ja gemeinsam mit dem Hauptmenü nach unten verschoben wurde. Also eins der Dropdowns mit den Browsertools untersuchen und schauen, wo genau dort die Position oder Verschiebung von oben angegeben wird. Diesen Wert dann anpassen, so dass das Dropdown genau unter dem Userpanel liegt.

    Ich denke dann dürfte soweit alles stimmen, wenn ich nichts übersehen habe.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!