# Komische Sidebar Navigation

**URL:** <https://forum.shopware.com/t/komische-sidebar-navigation/45576>\
**Category:** Themes & Design\
**Created:** [4. Mai 2017 um 09:00 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576 "2017-05-04T09:00:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ABC9](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ABC9](https://forum.shopware.com/u/ABC9)\
**Post date:** [4. Mai 2017 um 09:00 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/1 "2017-05-04T09:00:27Z")

</div>

Hi,

vergrößert und verkleinert man das Fenster in Chrome mehrmals dann bleibt irgendwan die Sidebar immer auf DISPLAY: NONE  
Das Problem besteht auch in der aktuellen Versionen von Shopware.

&nbsp;

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/b/bd56dc6be566a77663a1f10f96522b90617e8da1.png)

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [4. Mai 2017 um 10:04 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/2 "2017-05-04T10:04:07Z")

</div>

Hab es gerade mal - in allen Browsern - gestestet…, kann ich so nicht nachvollziehen. Der Breakpoint für den Umbruch liegt bei 768px, dann wird die Sidebar entfernt. Nicht mehr und nicht weniger. Leer bleibt da nichts.

---

<div class="post-metadata">

**Author:** ![ABC9](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ABC9](https://forum.shopware.com/u/ABC9)\
**Post date:** [4. Mai 2017 um 12:33 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/3 "2017-05-04T12:33:16Z")

</div>

> [@Murmeltier schrieb:](https://forum.shopware.com/profile/26331/Murmeltier "Murmeltier")
> 
> Hab es gerade mal - in allen Browsern - gestestet…, kann ich so nicht nachvollziehen. Der Breakpoint für den Umbruch liegt bei 768px, dann wird die Sidebar entfernt. Nicht mehr und nicht weniger. Leer bleibt da nichts.

Google Chrome Version 58.0.3029.96 (64-bit)

![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/f/f873063e30d6513aefa8de08fda1249429081d1d.gif)

&nbsp;

&nbsp;

P.S. Ich weiß kein Mensch zieht ein Fenster so kleiner aber es kann passieren.

---

<div class="post-metadata">

**Author:** ![ABC9](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ABC9](https://forum.shopware.com/u/ABC9)\
**Post date:** [24. Mai 2017 um 06:58 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/4 "2017-05-24T06:58:49Z")

</div>

Es liegt definitiv an der jquery.subcategory-nav Erweiterung &nbsp;

> <https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.subcategory-nav.js#L322>

---

<div class="post-metadata">

**Author:** ![MIRR\_DE](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@MIRR\_DE](https://forum.shopware.com/u/MIRR_DE)\
**Post date:** [24. Mai 2017 um 07:21 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/5 "2017-05-24T07:21:13Z")

</div>

Witzig. Also ich kann den Fehler auch nachstellen.  
Wobei ich da wahrscheinlich nie von allein drauf gekommen wäre…&nbsp; ![Sticking-out-tongue](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/sticking-out-tongue.png "Sticking-out-tongue")

---

<div class="post-metadata">

**Author:** ![ABC9](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ABC9](https://forum.shopware.com/u/ABC9)\
**Post date:** [24. Mai 2017 um 08:56 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/6 "2017-05-24T08:56:36Z")

</div>

ich hab das bei 5.2.9 entdeckt zieht sich sogar bis zur aktuellen version hin.

P.S. wenn jemand eine override oder subscribe Lösung zu dem Problem hat, dann wäre es schön wenn sie geteilt wird.

---

<div class="post-metadata">

**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\
**Post date:** [24. Mai 2017 um 09:10 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/7 "2017-05-24T09:10:17Z")

</div>

Hab es bei mir auch gerade mal getestet und kann es ebenfalls nachstellen. Shopware 5.2.22

Legt jemand ein [Ticket](https://issues.shopware.com/?status=1,3,10001,4,10010,10025,10017)an?

---

<div class="post-metadata">

**Author:** ![ABC9](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ABC9](https://forum.shopware.com/u/ABC9)\
**Post date:** [26. Mai 2017 um 15:44 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/8 "2017-05-26T15:44:09Z")

</div>

```
;(function ($, Modernizr) {
    'use strict';

  
    $.overridePlugin('swSubCategoryNav', {

        /**
         * Default plugin initialisation function.
         * Handle all logic and events for the category slider
         *
         * @public
         * @method init
         */
        init: function () {
            var me = this,
                transitionSupport = Modernizr.csstransitions,
                opts;

            // Overwrite plugin configuration with user configuration
            me.applyDataAttributes();

            opts = me.opts;

            // return, if no main category available
            if (!opts.enabled || !opts.mainCategoryId) {
                return;
            }

            /**
             * Reference of the main sidebar element.
             *
             * @private
             * @property $sidebar
             * @type {jQuery}
             */
            me.$sidebar = $(opts.sidebarMainSelector);

            /**
             * Wrapper of the navigation lists in the main navigation.
             *
             * @private
             * @property $sidebarWrapper
             * @type {jQuery}
             */
            me.$sidebarWrapper = $(opts.sidebarWrapperSelector);

            /**
             * Wrapper of the offcanvas animation
             *
             * @private
             * @property $navigation
             * @type {jQuery}
             */
            me.$navigation = $(opts.mobileNavigationSelector);
            me.$navigation.show();

            /**
             * Loading icon element that will be appended to the
             * clicked element on loading.
             *
             * @private
             * @property $loadingIcon
             * @type {jQuery}
             */
            me.$loadingIcon = $('', {
                'class': opts.loadingClass
            });

            /**
             * Function used in jQuery based on CSS transition support.
             *
             * @private
             * @property slideFunction
             * @type {String}
             */
            me.slideFunction = transitionSupport ? 'transition' : 'animate';

            /**
             * Easing used for the slide in.
             *
             * @private
             * @property easingEffectIn
             * @type {String}
             */
            me.easingEffectIn = transitionSupport ? opts.easingIn : opts.easingFallback;

            /**
             * Easing used for the slide out.
             *
             * @private
             * @property easingEffectOut
             * @type {String}
             */
            me.easingEffectOut = transitionSupport ? opts.easingOut : opts.easingFallback;

            /**
             * Flag to determine whether or not a slide is in a current
             * animation or if an ajax call is still loading.
             *
             * @private
             * @property inProgress
             * @type {Boolean}
             */
            me.inProgress = false;

            // remove sub level unordered lists
            $(opts.sidebarCategorySelector + ' ul').not('.navigation--level-high').css('display', 'none');

            me.addEventListener();

            // fetch menu by category id if actual category is not the main category
            if (!opts.categoryId || !opts.fetchUrl || (opts.mainCategoryId == opts.categoryId)) {
                return;
            }
            
            me.$sidebarWrapper.css('display', 'none');
            
            $.get(opts.fetchUrl, function (template) {
                me.$sidebar.addClass(opts.disableScrollingClass).append(template);
                // add background class
                $(opts.overlaySelector).addClass(opts.backSlideClass);
            });
        },

   
    });
}(jQuery, Modernizr));

 

jquery.subcategory-nav.js

 

hier eine overridePlugin Lösung. Das Problem liegt daran, dass der Ajax Request etwas länger dauern kann und man in der Zeit den Viewport wechseln kann und somit wird die sidebar auf display none gesetzt. Ich habe das display none aus dem ajax success handler rausgenommen und vor dem ajax request eingefügt.
```

---

<div class="post-metadata">

**Author:** ![mahlzeit](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@mahlzeit](https://forum.shopware.com/u/mahlzeit)\
**Post date:** [6. Juni 2017 um 10:08 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/9 "2017-06-06T10:08:14Z")

</div>

Bei uns ist komischerweise der block sidebar–categories-wrapper immer display:none

```
Da das style-Element allerdings im Original-DOM nicht enthalten ist wird es vermutlich auch durch ein javascript in den DOM geschrieben.

Wie bringt man das weg?
```

---

<div class="post-metadata">

**Author:** ![ABC9](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@ABC9](https://forum.shopware.com/u/ABC9)\
**Post date:** [6. Juni 2017 um 11:57 UTC](https://forum.shopware.com/t/komische-sidebar-navigation/45576/10 "2017-06-06T11:57:58Z")

</div>

Das es immer auf “display: none” steht kann nicht sein.

&nbsp;

Das “display: none” wird beim Initialisieren der jquery.subcategory-nav.js Erweiterung hier gesetzt sobald du dich im XS bzw. S&nbsp;Viewport befindest:&nbsp;

[https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/\_public/src/js/jquery.subcategory-nav.js#L322](https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.subcategory-nav.js#L322)  
&nbsp;

Wechselst du die Auflösung, dann wird beim verlassen der Viewports die Erweiterung geschlossen bzw. zerstört und beim eintreten wieder neuinitialisiert. (StateManager)

> <https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js#L113>

&nbsp;