Make Suckertree menu responsive

[sagiordano]

Hello,

I have created custom templates for my store and I am using the built-in page menu that creates the flyout menus. I have built the rest of the site using bootstrap but I don't have control over how the menu is created so it is using suckertree. The menu does not seem to be responsive by default. I know I can add css to collapse the menu based on screen size like bootstrap does, but if the html code is auto-generated for the menu, how to I get the collapse button in there? Or is there another way that I am supposed to make suckertree responsive?

Thanks!

Steve

[ShopSite Lauren]

The navigation menu is setup to be responsive in all the responsive design themes built in ShopSite. If you are creating a custom template, you would need to setup your own code (or use the same code from one of our themes) to make the menu responsive. For your specific question about the toggle, you could just add the toggle button outside the navigation menu. Something similar to the following:

Code: Select all

<a href="#" id="navToggle">Menu</a>
[-- PageMenu no_jscript --]

Then you would add your own CSS and/or JavaScript to have the menu act how you want it to act. Below is some basic code for this feature:

Code: Select all

<style type="text/css">
a#navToggle {display: none;}
ul#ShopSite {display: block; padding: 0px; margin: 0px; list-style: none}
ul#ShopSite ul {display: none; padding: 0px; margin: 0px; list-style: none}
ul#ShopSite li {display: block; clear: both; list-style: none; padding: 0px; margin: 0px; position: relative}
ul#ShopSite > li {display: inline-block; clear: none}
ul#ShopSite a {display: block; padding: 0px 15px; line-height: 26px; color: inherit}
ul#ShopSite > li > a {line-height: 36px}
@media screen and (min-width: 750px) {
   ul#ShopSite > li:hover > ul {display: block; position: absolute; top: 36px; left: 0px; min-width: 200px}
   ul#ShopSite li li:hover > ul {display: block; position: absolute; top: 0px; left: 100%; min-width: 200px}
}
@media screen and (max-width: 750px) {
   a#navToggle {display: block; color: inherit}
   ul#ShopSite {display: none}
   ul#ShopSite li {display: block !important; clear: both !important; line-height: 44px !important}
   ul#ShopSite ul {display: block !important; position: relative !important; top: 0px !important; left: 0px !important}
   ul#ShopSite ul {padding-left: 20px}
   ul#ShopSite ul ul {padding-left: 40px}
   ul#ShopSite ul ul ul {padding-left: 60px}
}
</style>
<script type="text/javascript">
function toggleNav() {
    var nav = document.getElementById("ShopSite");    
    nav.style.display = (nav.style.display != 'block' ? 'block' : '' );
    return false;
}
document.getElementById("navToggle").addEventListener("click", toggleNav);
</script>
<a href="#" id="navToggle" onclick="toggleNav()">Menu</a>
[-- PageMenu no_jscript --]