3.1.x und 3.2.x fixierte Navigationsleiste oben

[Admin]

Mit diesem Code kannst du die Navigationsleiste ganz oben fixieren, sodass sie immer zu sehen ist.
Der Code ist für prosilver konzipiert.

Vorgehensweise:

Erstelle ein Stylesheet namens navbar_top.css und füge folgenden Code ein:

Code: Alles auswählen

/* Fixed Navigation on Top of the Page
---------------------------------------- */

.navbar-top  {
	           background-color:transparent;
	           position: fixed;
	           margin: auto;
                   top: 0;
	           z-index:100;
	           padding:0px;
	           width: 100%;
}


.wrap {
	margin-top: 57px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	}
	
	
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
	.wrap {
		margin-top: 0 12px;
		margin-top:56px;
	}
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.wrap {
		margin-top: 68px;
	}
}	

.navbar {
	max-width: 1164px;
	min-width: 625px;
	margin: auto;
	border-radius: 0px;
	
}

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
	.navbar {
		margin: 0 12px;
	}
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.navbar {
		margin: 0px;
	}
}

Diese Stylesheet speicherst du im Ordner theme von prosilver ab.
Öffne das stylesheet.css von prosilver (Ordner theme) und füge am Ende

Code: Alles auswählen

@import url("navbar_top.css?v=3.2");

ein.

Öffne die Datei overall_header.html (im Ordner template) und finde folgende Stelle

Code: Alles auswählen

<!-- INCLUDE navbar_header.html -->

Schneide sie aus und setze sie in eine neue Zeile nach

Code: Alles auswählen

<!-- EVENT overall_header_body_before -->

Vor <!-- INCLUDE navbar_header.html --> setzt du jetzt <div class="navbar-top"> und danach </div>.
Leere den Cache und aktualisiere die Seite.

WICHTIG: Wenn du die Änderungen direkt am Style prosilver vornimmst, werden sie beim nächsten Update gelöscht werden. Dann musst du diesen Code wieder manuell einbauen.