Dynamische Webseite mit Dropdownmenü mit CSS + PHP

Den Header fixieren

Ich finde es äußerst angenehm, den Header mit der Navigationsleiste auch beim Scrollen immer im Sichtbereich zu haben, um ggf. an eine andere Stelle zu navigieren. Dies habe ich für diese Seite wie folgt umgesetzt:

*
 * Fixieren von Header und Footer nur, wenn genug Platz ist
 */
@media all and (min-height: 20em){
	header{
		width:100%;
		position:fixed;
		top:0;
		left:0;
	}
	section{
		margin-top:8em;
	}
}

Durch den sogenannten Media-Query am Beginn wird sichergestellt, dass die Fixierung der Überschrift nur bei ausreichend Platz erfolgt.

Um den Inhaltsbereich nicht von der Navigationsleiste überdecken zu lassen, muss man für ausreichend Platz zum Rand sorgen:

section{
	margin-top:8em;
}