Neu Mega Menu Trennung Menüeinträge

[info@bauer-tore.de]

Wie kann man im Shop 4 im EVO-Template im Mega Menu eine farbliche Trennung zwischen den einzelnen Menüpunkten realisieren. Wenn alles in einer Farbe ist dann sieht es optisch nicht gut aus. Gibt es da einen Eintrag für die Custom.css ? Wäre super wenn da jemand eine Lösung hätte

 

[kriss]

Hallo,

ein Strich z.B. zwischen den Menüpunkten geht hiermit:

.navbar-default .navbar-nav > li > a {
    border-right: 3px solid black;
}

Im EVO-Template werden aber Child-Templates verwendet. custom.css ist veraltet.
Zu beachten wäre hier dann noch, dass das Template responsive ist und sich dadurch das Mega Menu für verschiedene Displaygrößen ändert. Somit müsste dann die Trennung zwischen den Menüpunkten für diese Displaygrößen definiert werden.

Viele Grüße
Chris

 

[info@bauer-tore.de]

Hat super geklappt, vielen Dank.
Ich hätte noch eine Frage, wie kann ich den Platz oben links für das Logo vergrößern, ich habe es schon so versucht:

#logo a img {
max-height: 150px;
}

aber das klappt nur bedingt, muss man im Hedaer selbst noch etwas ändern, also den Platz für das Logo...?

 

[kriss]

Naja, 150px sind schon nicht wenig. Von hier aus kann ich jetzt nicht sagen, wie es sich genau auswirkt, bzw. was sich verschiebt.

 

[info@bauer-tore.de]

Mir würde es auch mehr auf die Breite ankommen, aber bei der Breite ist bei ca. 340 Pixel Schluss obwohl noch genügend Platz wäre bis zur Suche.
Außerdem wird das Logo unterschiedlich groß angezeigt in den verschiedenen Browsern... Im Edge/Chrome/Opera geht die Breite bis ca. 340px im Firefox nur bis 275px,
woran kann das liegen? Eine einheitliche Darstellung wäre schon wichtig...

 

[301Moved]

Das liegt daran, dass neben dem Logo-Block der Shopnav-Block liegt und die sich entsprechend die gesamte Breite teilen (wenn ich es gerade richtig im Kopf habe). Dafür musst du dann als Gegenspieler auch den Block anpassen, wenn du das Logo größer haben willst... wobei 150px Höhe schon sportlich ist.

 

[kriss]

richtig. Hatten wir schon geklärt:

Zum Beispiel:
In der header.tpl ab Zeile 142 auf col-xs-8 (hier 3. Zeile) und hier vorletzte Zeile auf col-xs-4 ändern.
Dann aber unbedingt schauen, ob es responsive (mobile) Darstellung auch noch funktioniert und nicht mit dem Suchfeld kollidiert.

                        {block name='header-branding-content'}
                        <div class="row">
                            <div class="col-xs-8" id="logo" itemprop="publisher" itemscope itemtype="http://schema.org/Organization" itemid="">
                                {block name='logo'}
                                <span itemprop="name" class="hidden">{$meta_publisher}</span>
                                <meta itemprop="url" content="{$ShopURL}">
                                <meta itemprop="logo" content="{$ShopLogoURL}">
                                <a href="{$ShopURL}" title="{$Einstellungen.global.global_shopname}">
                                    {if isset($ShopLogoURL)}
                                        {imageTag src=$ShopLogoURL alt=$Einstellungen.global.global_shopname class="img-responsive"}
                                    {else}
                                        <span class="h1">{$Einstellungen.global.global_shopname}</span>
                                    {/if}
                                </a>
                                {/block}
                            </div>
                            <div class="col-xs-4" id="shop-nav">
                            {block name='header-branding-shop-nav'}

Viele Grüße
Chris