Eigenen Button ins Header machen ?

    Hallo zusammen :-)

    Kann ich den einen eigenen Button in mein Header machen ? Bzw reicht es mir wenn es in der Menü-Leiste ist aber dann ganz rechts wo der graue Bogen ist. Geht sowas ? und wenn ja wie den ?


    Will einfach einen Button machen diesen dorthin machen und mit einer Seite verlinken

    im Anhang habe ich mal kurz ne Paint Zeichnung gemacht

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Man könnte einen Menüpunkt einfügen und den per CSS entspr. colorieren & verschieben, in etwa so:

    Code
    #menu-item-XXX {
    float: right;
    background: #f00;
    margin-top: -20px;
    border-radius: 10px;
}


    Link zur Seite?

    http://www.tvhuesingen.info der Button sollte eigentlich dann Trainingszeiten heißen ( ist momentan unter News als unterseite zufinden ) gut wäre es halt wenn er so einen effekt erweißt wie das Facebook icon wenn man drüber geht..

    ist das möglich ?

    Füge neben "Kontakt" einen entspr. Menüpunkt zu "Trainingszeiten" ein und verwende dann den o.g. CSS-Code mit dem dafür passenden ID bei XXX als Basis für weitere Anpassungen.

    Neuen Menüpunkt erstellen, im Frontend rechte Maustaste auf den neu erstellten Menüpunkt, "Element untersuchen", da steht er dann beim übergeordneten [FONT=Courier New]<li id="menu-item-XXX[/FONT]

    Wahlweise kann man auch eine eigene CSS-Klasse beim Menüpunkt anlegen mit eingeben, das entspr. Feld kann man über "Ansicht anpassen" im Menü-Editor sichtbar machen.

    okey habe ich rausgefunden.... habe nun nen Mneüpunkt angelegt und :

    #menu-item-4213 {
    float: right;
    background: #f00;
    margin-top: -20px;
    border-radius: 10px;
    }

    in die Custom CSS eingefügt aber irgendwie passiert nichts siehe Homepage :(

    Wenn ich auf den neu erstellten Menüpunkt klicke, sehe ich [FONT=Courier New]<li id="menu-item-[COLOR=#ff0000]4448[/COLOR][/FONT] und nicht [FONT=Courier New]4213[/FONT]

    Wenn du das richtige menu-item nimmst wird es auch klappen -
    z.B. !

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Perfekt Danke Dir :-) habe falsch im Quellcode geschaut .. vielen Lieben Dank. Nun kann ich aber auch ein fertiges Icon hochladen und einsetzen oder ?

    Wenn das Icon als Hintergrundgrafik via CSS in diesem Element verwendet wird, dann ja. Eigentlich macht man bei so einem Ansatz aber alles über CSS-Regeln. Mit gradients, border-radius, transitions usw. sind die erstaunlichsten Dinge möglich, wenn man sich mal etwas damit auseinandersetzt.

    Ja okey muss ich mich mal wohl reinlesen. Bin eigentlich raus aus dem Homepagezeug musste es aber wohl oder übel übernehmen... muss aber ehrlich sagen das es echt Spaß macht.


    Muss schauen wie ich zu dem Button noch einen Rahmen drum mache und vor dem Text ein kleines Icon setze und eventuell wenn man drüber fährt mit der Maus. und dann eben den Hintergrund wenn man drüber fährt auch abgerundet ist

    Rahmen macht man via border, kleine Icons könnte man aus dem vorhandenen Zeichensatz verwenden, z.B.

    Code
    #menu-item-4448 .avia-menu-text::before {
    font-family: 'entypo-fontello';
    content: '\e808';
    padding-right: 6px;
}

    perfekt, nun ist das icon vorne dran....

    sorry das ich soviel frage. Jetzt brauch ich eigentlich nur noch den alten Stand das es wieder an der stelle wie vorher ist und die Radien auch beim hintergrund sind wenn ich mit der Maus drauf klicke....

    Danke Dir sehr

    #menu-item-4448 {

    background-color: #ff0000;

    }

    Sprich die ID an und formatiere das so, wie Du möchtest. Und mouseover machst Du dann mit

    #menu-item-4448:hover {

    background-color: #ffff00;

    }

    Perfekt Danke jetzt sieht es so aus http://www.tvhuesingen.info

    CODE:
    #menu-item-4448 .avia-menu-text::before {
    font-family: 'entypo-fontello';
    content: '\e808';
    padding-right: 6px;
    }
    #menu-item-4448 {
    border-radius: 10px;
    background-color: #3d71a1;
    }
    #menu-item-4448:hover {
    border-radius: 10px;
    background-color: #3d71a1;
    }


    Perfekt....

    Wie schaffe ich nun noch :
    - Den Radius hin wenn ich drüber gefahren bin
    - ein selbst gemachtes ICOn vorne rein wo ich die Größe einstellen kann
    - und den ganzen Button wieder ganz nach rechts ?


    Danke Euch

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden