Herzlich Willkommen zur Anleitung um das Hauptmenü bei dem Design "BaseLine v.2" zu fixieren
In dieser Anleitung möchte Ich euch zeigen, wie Ihr das Hauptmenü oben fixieren könnt.
Eine Schritt-für-Schritt Anleitung, um auch ohne HTML Kenntnisse das Menü zu fixieren.
Schritt 1: Hauptmenü fixieren: CSS
Um das Hauptmenü zu fixieren fügen wir als erstes folgende CSS-Anpassungen ein.
Logge dich dazu ins ACP (Admin Control Panel) ein und wähle die Kategorie "Anpassung" -> "Stile".
Wähle nun den Stil aus, in dem das Hauptmenü fixiert werden soll. Wähle das "Bearbeiten"-Icon (Stift).
Wechsle im Tab-Menü zu "Erweiterte Einstellungen", im Textfeld "Individuelles CSS und SCSS".
Füge ganz unten folgende Textzeilen ein:
.pageHeaderPanel {
position: fixed;
}
.userPanel {
position: absolute !important;
z-index: 100 !important;
}
.pageHeaderSearch {
z-index: 200 !important;
}Klicke auf "Absenden".
Schritt 2: Hauptmenü fixieren: Templates (HTML)
Logge dich dazu ins ACP (Admin Control Panel) ein und wähle die Kategorie "Anpassung" -> "Templates".
Ändere oben in den Filter-Einstellungen "Standardtemplates" zu deinem jeweiligen Stilnamen (Beispielsweise: "BaseLine"),
klicke auf "Absenden". Nun werden dir eine Handvoll von Templates zum bearbeiten angeboten, wähle das Template "pageHeader".
Wähle das "Bearbeiten"-Icon (Stift). Ersetze den vollständigen Inhalt durch folgenden:
<div id="pageHeaderContainer" class="pageHeaderContainer">
<header id="pageHeader" class="pageHeader">
<div id="pageHeaderPanel" class="pageHeaderPanel">
<div class="layoutBoundary">
{include file='pageHeaderMenu'}
</div>
</div>
<div id="pageHeaderFacade" class="pageHeaderFacade">
<div class="layoutBoundary">
{include file='pageHeaderLogo'}
{include file='pageHeaderUser'}
{include file='pageHeaderSearch'}
</div>
</div>
<script data-relocate="true">
require(['WoltLabSuite/Core/Ui/Page/Header/Fixed'], function(UiPageHeaderFixed) {
UiPageHeaderFixed.init();
});
</script>
</header>
{hascontent}
<div class="boxesHero">
<div class="layoutBoundary">
<div class="boxContainer">
{content}
{foreach from=$__wcf->getBoxHandler()->getBoxes('hero') item=box}
{@$box->render()}
{/foreach}
{/content}
</div>
</div>
</div>
{/hascontent}
</div>Klicke auf "Absenden".
Ich hoffe diese Anleitung konnte euch helfen, ansonsten bei Problemen oder auch Fragen einfach melden, Ich werde euch schnellstmöglich helfen!