Ich belebe den Thread mal wieder, immerhin ist es eins der ersten ergebnis wenn man nach “shopware fixed header” sucht.
Und zwar hatte ich selbiges Problem. Durch das Z-Index Stacking verhält sich das “Mein Konto” Menü wie oben beschrieben komisch.
Um das Problem zu lösen habe ich dafür gesorgt, dass das js–overlay nicht im Body erstellt wird, sondern im Header (den ich vorher gewrappt habe). Dadurch passt der Z-Index dann. Dies lässt sich über das anpassen eines der jQuery Plugins und des Templates lösen.
Ich teile einfach mal den Code.
{extends file="parent:frontend/index/index.tpl"}
{block name="frontend_index_body_classes"}
[REDACTED]
{/block}
{* Shop header *}
{block name='frontend_index_navigation'}
{* Include the top bar navigation *}
{block name='frontend_index_top_bar_container'}
{include file="frontend/index/topbar-navigation.tpl"}
{/block}
{block name='frontend_index_header_navigation'}
{* Logo container *}
{block name='frontend_index_logo_container'}
{include file="frontend/index/logo-container.tpl"}
{/block}
{* Shop navigation *}
{block name='frontend_index_shop_navigation'}
{include file="frontend/index/shop-navigation.tpl"}
{/block}
{block name='frontend_index_container_ajax_cart'}
{/block}
{/block}
{* Maincategories navigation top *}
{block name='frontend_index_navigation_categories_top'}
{block name="frontend_index_navigation_categories_top_include"}
{include file='frontend/index/main-navigation.tpl'}
{/block}
{/block}
{/block}
Man beachte Zeile 9. Hier wrappe ich das ganze.
Jetzt zum CSS:
//Datei: header.less
.header-wrap {
box-shadow: 0px 1px 5px #999;
position: fixed;
z-index: 5000;
width: 100%;
.js--overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
pointer-events: all;
}
[redacted]
}
Hier kommt dann der z-index auf den Header.
Wenn man das soweit hat tritt das oben beschriebene Problem auf, bei dem sich das js–overlay über den ganzen DOM legt. Also einschließlich den Menüs.
Um das zu vermeiden also JS anpassen:
'use strict';
var $html = $('html');
$.overridePlugin('swOffcanvasMenu', {
openMenu: function () {
var me = this,
opts = me.opts,
menuWidth = me.$offCanvas.outerWidth();
if (me.isOpened) {
return;
}
me.isOpened = true;
$.publish('plugin/swOffcanvasMenu/onBeforeOpenMenu', [me]);
$html.addClass('no--scroll');
$.overlay.open({
onClose: $.proxy(me.closeMenu, me),
renderElement: '.header-wrap'
});
if (opts.moveWrapper) {
if (opts.direction === 'fromRight') {
menuWidth *= -1;
}
me.$pageWrap.css('left', menuWidth);
}
me.$offCanvas.addClass(opts.openClass);
$.publish('plugin/swOffcanvasMenu/onOpenMenu', [me]);
if (opts.mode === 'ajax' && opts.ajaxURL) {
$.ajax({
url: opts.ajaxURL,
success: function (result) {
me.$offCanvas.html(result);
}
});
}
}
});
Dieser Code ist 1:1 die originale Funktion bis auf zeile 22. Jetzt sollte alles klappen!
Kleiner Hinweis: Das problem hat mich viel Zeit und nerven gekostet. Es kann daher sein das ich noch eine Änderung an einer Stelle gemacht habe welche ich mittlerweile schlicht vergessen habe. Sollte die Lösung bei jemanden also nicht funktionieren, schreibt dies doch bitte als Kommentar hier drunter, damit ich den Post dann updaten kann.
Ich hoffe jetzt finden Leute die Lösung bei Google