A different Smart Mini Menu

[graphicz]

I often have trouble getting the mobile nav to display both catalog sections and brochure pages expecially when the section menu is on the left. This is not all my work but I have adapted and applied.

This uses independent menus for the mobile so you can do what you like with the main site megamenu and brochure menu and the mini nav will behave.

In Design Library Layouts copy the Smart Mini Menu layout so you have a backup.

Copy this into the Smart Mini Menu:

<div class="miniNav">
            <p class="mobileMenuHeadingsec mobile">Show Store Sections<span>+</span></p>
            <div class="sectionMenu mobile">
                <ul>
                <actinic:block type="TopLevelSectionList" >
                    <li><actinic:variable name="SectionLink" value="Section Name Only Section Link" /></li>
                </actinic:block>
                </ul>
            </div>

        <script type="text/javascript">
            $(".mobileMenuHeadingsec").on("click", function() {
                $(this).next(".sectionMenu").slideToggle("slow", function() {
                    $(this).addClass('hideMobileMenu');
                    $(this).prev().html($(this).is(":visible") ? "Hide Store Sections<span>-</span>" : "Show Store Sections<span>+</span>");
                 });
            });
        </script>

            <p class="mobileMenuHeading mobile">Show Information<span>+</span></p>
            <div class="sectionMenu mobile">
                <ul>
                <actinic:block type="BrochurePagesList" >
                    <li><actinic:variable name="BrochurePageLink" value="Simple Brochure Page Link" /></li>
                </actinic:block>
                </ul>
            </div>

            <script type="text/javascript">
            $(".mobileMenuHeading").on("click", function() {
                $(this).next(".sectionMenu").slideToggle("slow", function() {
                    $(this).addClass('hideMobileMenu');
                    $(this).prev().html($(this).is(":visible") ? "Hide Store Information<span>-</span>" : "Show Store Information<span>+</span>");
                 });
            });
        </script>    


    <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22" >
        <actinic:block if="%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e">
            <p class="productFiltersTitle">Filter<a id="productFiltersTitle" href="#productFiltersLeft" onclick="$(this).text($(this).text() == '-' ? '+' : '-');">+</a></p>
        </actinic:block>
    </actinic:block>
</div>

Copy this into the bottom of the stylesheet:

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.mobile { display:none; }
@media screen and (max-width:800px) {
    .desktop { display:none; }
    .mobile { display:block; }
    .mobileMenuHeading, .mobileMenuHeadingsec { background:white; font-size:16px; font-weight:bold; border:1px solid #999; padding:15px; margin:1px auto 0 auto; cursor:pointer; width:100%!Important; box-sizing:border-box;}
    .mobileMenuHeading span, .mobileMenuHeadingsec span {
        display: block;
        float: right !important;
        width: 1em;
        margin: 0 !important;
        font-size: 2em;
        text-align: center;
}
.mobileMenuHeading span:hover, .mobileMenuHeadingsec span:hover {
        color:#cc0000;
}
    .sectionMenu { display:none; }
    .sectionMenu { width:90%; margin:0 auto; border:1px solid #999; border-top:none; box-sizing:border-box;}
    .sectionMenu ul { list-style-type:none; padding:0; margin:0; text-align:center;}
    .sectionMenu ul li { border-bottom:1px solid #ccc; margin:0;padding:0; }
    .sectionMenu ul li:hover {    background: #A31F4D;}
    .sectionMenu ul li:last-child { border-bottom:none; }
    .sectionMenu ul li a { display:block; width:100%;     padding:1%;font-size: 1.2em;}
    .sectionMenu ul li a:hover {text-decoration:none; color:#ffffff;}
}

/* Hide the mobile menu when resizing the browser */
@media (min-width: 801px) {
    .hideMobileMenu { display:none !important; }
}

(If both Section or Brochre menus are set to be in the menu bar you will have to get rid of a:

    <actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz4%5fSectionPageList%22%20%2f%3e%20%21%3d%20%22Main%20Menu%20Bar%22%20AND%20%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%21%3d%20%22Main%20Menu%20Bar%22">
    .navigation-bar {
        display:none;
    }
</actinic:block>

in the responsive css)

See it here: https://www.graphicz.solutions/mininav/