[Anleitung] BaseLine v2 - Hauptmenü fixieren

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!