Zusätzliche Linie in der oberen Menüleiste

Shopware 5 Themes & Design
1

Hallo

Ich würde gerne eine zusätzliche schwarze Linie in der oberen Menüleiste einfügen (siehe Bild; dort in rot dargestellt). So wie die genau darunter.

1509×255 61.4 KB

Könnt Ihr mir weiterhelfen?

2

Ich habe mir das Header Helfer Plugin gekauft. Damit konnte ich mir dann gut weiterhelfen. :slight_smile:

3

Hallo,

Wie konntest du das denn damit lösen?

Ich habe mit dem Support gesprochen und die meinten das geht nicht.

 

Gruss

Henrik

4

Ich hatte einfach nen Hintergrundbild erstellt und es dem Header zugewiesen. Aber mittlerweile konnte ich es eleganter im Template lösen.

 

main-navigation.less

(border-top)

@media screen and (min-width: @tabletViewportWidth) {
	.navigation-main {
        border-bottom: 1px solid @brand-primary;
		border-top: 1px solid @brand-primary;
		display: block;
		position: relative;

		.navigation--list {
			.clearfix();
            .unitize-padding(0, 10);
            margin: 0;
            position: relative;
            white-space: nowrap;
		}

		.navigation--entry {
            display: inline-block;
            -ms-touch-action: none;
		}

		.navigation--link {
            .transition(none 0);
			.unitize-padding(8, 14);
            .unitize(font-size, 14);
			.border-radius-multi(0px, 0px, 0, 0);
			margin: 0;
			display: block;
			cursor: pointer;
			color: @text-color;

			&:hover { color: @brand-primary; }
		}

		.is--active .navigation--link {
			.primary-gradient();
			font-weight: 600;
			color: #fff;

            &:hover { color: #fff; }
		}
	}
}

 

1 „Gefällt mir“
5

Hallo,

erst mal vielen Dank. Funktioniert bei mir leider nicht.

Kann es sein das Plugins das überschreiben (individuelles Dropdown Menü oder erweitertes Menü oder Hedaer Master obwohl alle deaktiviert sind)?

 

Gruß

Henrik

6

Moin

Kann viele Ursachen haben. Hier mein Ablauf.

Hatte nen neues Template (abgeleitet vom Responsive) erstellt. Dem Shop zugewiesen.

Dann eine all.less im Ordner /themes/Frontend/Deutsch/frontend/_public/src/less angelegt. Für Dich reicht hier die erste Zeile.

@import "_modules/main-navigation";
@import "_modules/sidebar";

Dann im weiteren Ordner _modules die Datei main-navigation.less angelegt.

@media screen and (min-width: @tabletViewportWidth) {
	.navigation-main {
        border-bottom: 1px solid @brand-primary;
		border-top: 1px solid @brand-primary;
		display: block;
		position: relative;

		.navigation--list {
			.clearfix();
            .unitize-padding(0, 10);
            margin: 0;
            position: relative;
            white-space: nowrap;
		}

		.navigation--entry {
            display: inline-block;
            -ms-touch-action: none;
		}

		.navigation--link {
            .transition(none 0);
			.unitize-padding(8, 14);
            .unitize(font-size, 14);
			.border-radius-multi(0px, 0px, 0, 0);
			margin: 0;
			display: block;
			cursor: pointer;
			color: @text-color;

			&:hover { color: @brand-primary; }
		}

		.is--active .navigation--link {
			.primary-gradient();
			font-weight: 600;
			color: #fff;

            &:hover { color: #fff; }
		}
	}
}

Danach alles kompilieren und es sollte funktionieren.

7

Moin,

 

habe es jetzt mit dem Header Master von Shopwerk gelöst. Gleicher Programmierer wie Header Helfer.

Der war so freundlich und hat das eingebaut.

 

Danke für Deine Hilfe