> For the complete documentation index, see [llms.txt](https://coolbax.gitbook.io/coolbax-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coolbax.gitbook.io/coolbax-docs/shopware-5-plugins/storefront/sticky-menu-professionell.md).

# Sticky Menü Professionell

{% embed url="<https://www.youtube.com/watch?t=1s&v=JWWrTac1Quc>" %}

## Installation <a href="#installation" id="installation"></a>

Sie können das Plugin über den Shopware Community Store erwerben. Das Plugin wird wie ein ganz gewöhnliches Plugin installiert.&#x20;

{% embed url="<http://store.shopware.com/cbax133198783737/sticky-menue-professionell-shopware-5.html>" %}
Plugin über den Shopware Community Store erwerben
{% endembed %}

Nach der Installation des Plugins öffnet sich die Konfigurationsmaske des Plugins.

## Die Einstellungen des Plugins <a href="#plugin_einstellungen" id="plugin_einstellungen"></a>

Nach der erfolgreichen Installation des Plugins können Sie in der Konfigurationsmaske die Einstellungen vornehmen und weitere Parameter ergänzen.

<figure><img src="/files/rp1sg2owI0E4MIRJNdWg" alt="" width="350"><figcaption></figcaption></figure>

| Feldname                        | Bedeutung                                                                                                                                                          |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Aktiv                           | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren                                                                                                    |
| Sticky Menü anzeigen als        | Soll die Navigationsleiste oder die Suchleiste an den Browser angeheftet werden                                                                                    |
| Auch auf Tablet anzeigen        | Soll das Sticky Menü auch auf einem Tablet angezeigt werden                                                                                                        |
| Auch auf Smartphone anzeigen    | Soll das Sticky Menü auch auf einem Smartphone angezeigt werden                                                                                                    |
| Dauer Einblendung Sticky Search | Wie schnell soll die Suche eingeblendet werden. Dauer in ms                                                                                                        |
| Scroll-to-Top Aktiv             | Scroll-to-Top Funktion aktivieren                                                                                                                                  |
| Scroll-to-Top Button            | Welchen Style soll der Button haben. Zur Auswahl stehen: Normaler Button, Primärer Button, Sekundärer Button dadurch passt sich der Button nahtlos dem Template an |
| Dauer Scroll-to-Top             | Mit welcher Geschwindigkeit soll nach oben gescrollt werden. Dauer in ms                                                                                           |

## Die Primär- und Sekundärfarbe <a href="#theme_einstellungen" id="theme_einstellungen"></a>

Die Primär- bzw. Sekundärfarbe, für den Scroll-to-Top Button, wird aus dem Theme Manager verwendet. Gehen Sie hierzu auf "Einstellung > Theme Manager". Wählen das verwendete Template aus und gehen auf den Button "Theme konfigurieren". Wählen Sie dort den Reiter "Farb-Konfigurationen". In den Feldern "@brand-primary" & "@brand-secondary" finden Sie die jeweiligen Farben.

{% hint style="warning" %}
**Hinweis:** Bedenken Sie, dass eine Veränderung in diesen Einstellungen, globale Auswirkungen auf Ihren Shop haben.
{% endhint %}

## Darstellung im Frontend <a href="#darstellung_frontend" id="darstellung_frontend"></a>

### Navigationsleiste als Sticky <a href="#darstellung_frontend_navigationsleiste" id="darstellung_frontend_navigationsleiste"></a>

Die Anzeige der Navigationsleiste als Sticky Menü. Mit dieser Einstellung wird die Hauptnavigation eingeblendet. Das Einblenden des Layers mit der Unternavigation sowie Bildern und Texten funktioniert hier ebenfalls.

<div><figure><img src="/files/2HaABIFDDj0TfUvsUevj" alt=""><figcaption></figcaption></figure> <figure><img src="/files/tQaxYykw0Mp9tlWpKVtY" alt="" width="563"><figcaption></figcaption></figure></div>

### Suchleiste als Sticky <a href="#darstellung_frontend_suchleiste" id="darstellung_frontend_suchleiste"></a>

Die Anzeige der Suchleiste als Sticky Menü. Mit dieser Einstellung fahren folgende Punkte immer mit: Suchleiste, Merkzettel, Kundenkonto und der Warenkorb.

<figure><img src="/files/zRaWoJbCzQiW3q22Rdaz" alt="" width="350"><figcaption></figcaption></figure>

### Suchleiste und Navigationsleiste als Sticky <a href="#darstellung_frontend_suchleiste_navigationsleiste" id="darstellung_frontend_suchleiste_navigationsleiste"></a>

Diese Einstellung vereint beide Varianten der Anzeigemöglichkeiten. Die Anzeige der Suchleiste mit einblendbarer Navigationsleiste als Sticky Menü.

<div><figure><img src="/files/fl5Vqw4kJmtPgyjtjpNB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Z97jfcUJAgFguuitPFRt" alt=""><figcaption></figcaption></figure> <figure><img src="/files/sl4N0dJdvTiAfBfWMIOz" alt="" width="563"><figcaption></figcaption></figure></div>

### Scroll-to-Top Button <a href="#darstellung_frontend_scrolltotop" id="darstellung_frontend_scrolltotop"></a>

Die Anzeige des Scroll-to-Top Button - Darstellung von links nach rechts: Normaler Button, Primärer Button, Sekundären Button

<div><figure><img src="/files/o7Qwn06r3Rv8kGNrvlPW" alt=""><figcaption></figcaption></figure> <figure><img src="/files/xfkSKbCXYheZRqdgKn8Q" alt=""><figcaption></figcaption></figure> <figure><img src="/files/0dCsbslVkkwvkHmVP4hP" alt=""><figcaption></figcaption></figure></div>

## Responsive - Tablet <a href="#responsive_frontend" id="responsive_frontend"></a>

Die Anzeige des Sticky Menü Professionell. Dargestellt auf dem Tablet. Im Bereich Smartphone wird der Shopware-Standard genutzt.

<div><figure><img src="/files/dHE44YYQxKLjwYMQ1tyZ" alt=""><figcaption></figcaption></figure> <figure><img src="/files/oc49hYT2rhBYR1wbKbtW" alt=""><figcaption></figcaption></figure> <figure><img src="/files/7BAJzEtL094mXM1r4kIG" alt=""><figcaption></figcaption></figure></div>