Horizontales Menü fixieren?

Hallo Leute, ich schon wieder mit ner Design-Idee....

Kann man mit einem "Custom CSS-Code" im Template eigentlich die horizontale Menüleiste fixieren, so dass sie beim scrollen am oberen Bildschirmrand "kleben" bleibt?

Gruß
André

Geht sicher irgendwie, hab ich aber noch nie versucht
Du brauchst denke ich sicher auch JavaScript dafür. Beim schnellen Googlen habe ich zB das gefunden: codepen.io/senff/pen/ayGvD

Ja, das wäre ne Möglichkeit. Ich dachte, dass man, so wie mit dem #beforehead machen kann.

#beforehead{
position: fixed;
top: 0;
z-index: 1;
}

Nur das man das mit dem Menü auch machen kann. Ist mir nur nicht gelungen. Jetzt hatte ich die Hoffnung einfach was übersehen zu haben.

Gruß
André

Da hier Desktop und mobile Ansicht recht verschieden sind, lohnt es sich Media-Queries zu nutzen.
Das wären Durch die Verwendung der LESS-Variablen skaliert der Code mit der im Backend genutzten Option.

Für die mobile Variante bietet sich #topmenu_container, für die Desktopvariante #topmenu an.
Der Rest ist dann nur noch ne Design-Frage.

@Thomas: Der von dir verlinkte Code sieht ja recht simpel aus. Wäre das was fürs Template? (Ich würde das dann über Klassen regeln: sticky, sticky-mobile, sticky-desktop. So kann man selbst entscheiden, ob man das möchte.)
Ne Option für ne frei einbindbare JS wäre wahrscheinlich auch nicht schlecht.

@Matthias Ich hab das nur ergoogelt. Ich hab keine Ahnung ob es mit dem Allrounder funktioniert
Ein eigene JS kann man ja sehr einfach enbinden mittels entsprechenden Modulen oder Plugins. Oder man macht nen Override für das Menümodul-Layout, wo man dann ja auch JS einbinden kann. Ich denke nicht dass wir diese Option im Template benötigen.
Wenn es auf einfachem Weg möglich ist son Sticky Menü im Template aufzunehmen merge ich das gerne. Es gibt aber vermutlich auch schon entsprechende Menümodule im JED welche das templateunabhängig machen.

Erst mal Danke, dass ihr euch damit beschäftigt. Aus vielen Ideen und Überlegungen entsteht evtl. das, was man sucht...

Was z.B. geht ist:

#topmenu ul.menu {
position: fixed;
top: 0;
z-index: 1;
}

Dann klebt das aber ständig am oberen Rand. Ich hätte eben gern, dass es an der Position steht, an der es definiert ist, und erst am oberen Rand hängen bleibt, wenn die Seite nach oben scrollt.

Ideen?
Gruß
André

Ach ja, noch was: @Thomas: Kann ich das Hintergrundbild in "Template Colors" -> 'Background Image" auch fixieren?