-
Posts
-
Hey,
is it possible to add Icons above “Title” (Menu Item)? I already saw the tutorial videos, but this is for second row. I want to add Icons on Main Menu above title.
Hey combra!
It might be possible with some CSS. Send us a link to your page and take a screenshot highlighting exactly where your trying to move them and we’ll take a look.
Cheers!
ElliottHey, ich werde am Montag die benötigten Daten nachreichen. Momentan hab ich noch keine Änderungen am Theme selbst vorgenommen. Ich möchte nur ein Menü (der direkt sichtbare Teil) mit Titel und Icon haben. Das es im Mega Menü, im aufgeklappten Modus funktioniert, hatte ich bereits auf den Videos gesehen. Jeder Menüpunkt (sichtbarer Teil) soll ein Icon darüber bekommen.
Habe mal die ersten Produktkategorien angelegt (Oberkategorien). Diese sollten im Menü nach Möglichkeit überhalb ein Icon/Bild erhalten.
Hey!
kannst du bitte erst einmal die Icons im Menü einfügen? so wie du es im Tutorial bereits gesehen hast? Hinterher werden wir dann per CSS code dafür sorgen, dass die Icons oberhalb platziert werden.
Lass uns wissen, wenn du soweit bist.Gruß,
AndyHey Andy, danke für die schnelle Antwort. Das Tutorial ist ja nur für Second Row in Verbindung mit einem MegaMenu gedacht? Ich kann dort wo jetzt z.B. “Kartons..” steht, kein Img einfügen. Nicht dass wir hier aneinander vorbeireden, ein Screen wie ich es mir gedacht habe.
Hi!
du kannst HTML oder auch shortcodes in deinem Menünamen verwenden. Dadurch wird es dir möglich Icons in deinem Menü mit einzublenden. Lass uns wissen, wenn du das gemacht hast, dann können wir uns darum kümmern die Position etc. mittels CSS code anzupassen.
Gruß!
AndyHi!
das Menü sieht jetzt etwas chaotisch für mich aus und ich weiß nicht genau wie du es haben möchtest, aber versuche es mit diesem Code:
img.alignnone.size-full.wp-image-131 { position: relative; top: -15px; right: -45px; }Gruß,
AndyHey Andy,
ja, die Icons sind jetzt nur Testweise drin, da die richtigen noch beim Grafiker sind. Ich habe die style.css beschreibar gemacht, da darfst du gerne auch selbst testen.
Wie ich es haben möchte:
1. Das Bild sollte mittig zum Title (Text des Menüs) ausgerichtet sein. Jeder Menüpunkt wird ein eigenes Icon erhalten mit der selben Größe
2. Die Linen sollten breiter auseinander sein
3. Nach jetztigen Stand sollte das Menü etwas nach unten geschoben werden, da es in das Logo ragt.Es wäre sicher sinnvoll, hier eine eigene Img Klasse zu entwerfen? Ansonsten betrifft die CSS Bearbeitung ja auch die normalen Bilder die so eingefügt werden.
Hey!
also ich weiß jetzt immer noch nicht wirklich wie du es haben möchtest. Wir bräuchten bitte eine Skizze/Screenshots (imgur oder dropbox), die genau zeigt wie du dir das vorstellst.
Menü kannst du hiermit nach unten verschieben:div#header_main_alternate { top: 114px; }Cheers!
AndyOk, ich habe es mal handschriftlich versucht und hoffe das es einigermaßen nun rüberkommt. Punkt 1,2,3 sind erstmal optional, soll später folgen.
Hi!
wie du das Menü weiter nach unten verschieben kannst (weg vom Logo/Headerbereich) habe ich dir in meinem vorigen Post bereits gezeigt.
Die icons kannst du hiermit verschieben:
img.alignnone.size-full.wp-image-131 { right: 50px; }Aber was du denke ich brauchst ist das jedes Icon einzeln verschiebbar ist, richtig? du verwendest momentan für jedes Icon die selbe class Wert:
class=”alignnone size-full wp-image-131″
Du müsstest für jedes Icon einen anderen class Wert einfügen, damit jedes Icon mit dieser einzigartigen class via CSS aufgerufen werden kann.Gruß!
AndyWenn ich es mit der Verschiebung wie in deinem vorherigen Post mache, muss ich die ganzen anderen Container auch verschieben. Gibt es da evtl. eine leichtere Möglichkeit das ab Header alles um z.B. 50 px verschoben wird? Wenn nicht, wie spreche ich den Title Container, Content Container etc. an, damit das wieder gut aussieht :P
Habe jetzt herausgefunden, wie ich den Title und Breadcrumb verschiebe. Wie ich die Linie allerdings an die richtige Stelle schiebe (unterhalb des Menüs), habe ich noch nicht gefunden.
.avia-menu {
top: 20px;
}#top .title_container .container {
padding-top: 40px;
padding-bottom: 10px;
min-height: 56px;
}.title_container .breadcrumb {
paddingHey!
ich sehe ziemlich viele Linien auf deiner Website und leider zeigst du uns nicht genau welche du meinst. Bitte nutze doch imgur oder dropbox, umdeutlich zu machen was du verändert haben möchtest.
Den main content kannst du hiermit verschieben/vergrößern:
main.template-page.content.av-content-full.alpha.units { margin-top: 81px; }Gruß,
AndyHabe anbei mal einen Screenshort mit Beschreibungen wo es hakt, was fehlt beigefügt. Ich hoffe, dass es nun halbwegs verständlich ist.
Grüße
AlexHey!
danke für die Skizze. Sie ist zwar sehr schwer für mich zu entziffern, aber habe folgenden Code in dein Quick CSS eingefügt:
.stretch_full.container_wrap.alternate_color.light_bg_color.title_container { top: 82px; } div#header_main_alternate { height: 92px; } nav.main_menu { top: 27px; } .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a { line-height: 65px; height: 45px; } li#menu-item-118 { overflow: visible !important; } img.alignnone.size-full.wp-image-131 { right: -111px !important; }Hoffe du bist nun glücklich :).
Liebe Grüße,
AndyJa, das gefällt mir jetzt gut :) Jedoch gibt es einen kleinen Schönheitsfehler, siehe Screenshort (gelb markiert). Und noch eine kurze Frage: wo hast du den Code eingefügt? Kann ihn nicht finden :)
Vielen Dank!
Hi!
den Code findest du im Quick CSS Feld (Enfold->General Styling->Quick CSS). Kannst du bitte einen Link einfügen der Seite, die du im Screenshot zeigst? Wir müssten uns die Elemente mal genauer anschauen, aber ich kann die Seite nicht finden auf die Schnelle.
Gruß,
AndyDas sind alle Seiten mit Inhalt (Content Bereich) sowie falls eine Sidebar vorhanden ist, siehe angefügte Adressen:
Hi!
versuche es mit diesem Code:
main.template-shop.content.av-content-small.alpha.units { top: 30px; } aside.sidebar.sidebar_right.alpha.units { top: 30px; }Gruß,
AndyKeine Änderung. Hab mal einen Slider auf der Startseite eingebunden, da sieht man das Problem dann deutlich. Sozusagen müsste der Title und die Brotkrümmel Navigation verschoben werden.
Hi!
bitte verwende das Quick CSS Feld, um CSS code einzufügen. Ich konnte nicht sehen, dass du den Code eingefügt hast, also habe ich es selbst gemacht und voila nun schaut es gut aus auf deiner Shop Seite. Kannst du das bestätigen?
Gruß!
AndyIch hatte es wieder rausgenommen, da ich keine Änderungen am Layout gesehen hatte, auch jetzt noch nicht. Habe meinen Browsercache bereits gelöscht. Werde es noch von einem anderen PC aus versuchen. Bei mir sieht es immer noch gleich aus, siehe angehängten Screenshot.
Hey!
mit dem Code von hier wird der main content und die sidebar nach unten verschoben, sodass beide nicht mehr mit dem Title und den Breadcrumbs überlappen. Das Ergebnis kannst du auf deiner Shop-Seite (s. Private Content) sehen. Ebenfalls ist dieses Ergebnis auch auf deinem dritten Screenshot zu sehen.
Du kannst natürlich stattdessen oder zusätzlich auch die Breadcrumbs nach oben schieben:
.breadcrumb.breadcrumbs.avia-breadcrumbs { top: -12px; }und den Title:
h1.main-title.entry-title { top: -41px; }Gruß!
AndyStimmt, mit der Verschiebung von Breadcrumb und Title läuft es jetzt auch bei Slider Seiten. Vielen Dank, das wars erstmal :)
- The topic ‘Mega Menu with Icons’ is closed to new replies.