0

I'm attempting to move navigation.sections into sidebar.main on a three column Magento 2 layout.

I have a custom theme inheriting Magento/blank. I have moved the navigation using:

MyVendor/mytheme/Magento_Theme/layout/default.xml

<?xml version="1.0"?>    
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="navigation.sections" destination="sidebar.main" />
    </body>
</page>

This renders as expected on desktop, and also on mobile.

However, when activating the menu on any category page, the grey overlay .nav-open .nav-toggle:after sits above the navigation. CSS z-index for the navigation/overlay seems to go out of the window.

enter image description here

This only occurs on category pages. On CMS and product pages the menu works as expected.

How would I go about diagnosing this further from here?

Improve this question

1 Answer 1

Reset to default
0

above the navigation CSS z-index is comming from .nav-toggle.

.nav-toggle{
   z-index: inherit;
}

Like: 

.catalog-category-view .nav-toggle{
   z-index: inherit;
}

make sure you have to add parent class before this class. another then it will effect on other pages.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.