ShopSite has a navigation menu feature where merchants can create top level links, with sub link flyout menus enabling shoppers to hover over the main category to drill down to the sub categories. This is a nice solution for desktops, but what about tablets and mobile devices where shoppers can't hover over menus to see the sub links? Mobile and tablet devices have smaller screen sizes, limiting readability, limiting the click target area (an issue for thumbs to click) and limiting the number of navigation links that can be displayed. An increasingly popular solution for navigation menus in small screens is to combine the navigation links into a single clickable toggle in one corner of the viewing area. Once the shopper clicks on the menu toggle, they will see all the main category links, with additional clicks to drill down like they would do with hover options in the desktop version. For help creating this type of menu, try out this responsive design menu for your custom templates in ShopSite. This responsive menu uses both CSS and JavaScript to create a responsive design menu that merchant's can easily edit and modify themselves.

Start by setting up your navigation menu in ShopSite; this is done under Preferences > Navigation. You can also view a the video tutorial for help setting up the navigation menus in your store. Also checkout tips for creating a user friendly navigation menu to make sure you avoid main common mistakes that merchants make in their navigation menus.
Add the template tags and toggle code to your custom template. In your custom template, where you would like the top navigation menu to appear, add the following code:
```
[-- IF PageMenu --]
<nav id="navwidth"><a id="navToggle" href="#">Categories</a>
[-- PageMenu no_jscript --]
</nav>
[-- END_IF --]
```
NOTE: You don't have to use the <nav> as the containing element. Just make sure you add id="navwidth" to whatever your navigation containing element (max navigational width).

Add the necessary JavaScript. This JavaScript should load AFTER the page loads, so it should be placed at the bottom of the page, just before the </body> tag. You could also create an external Javascript file containing all of this code and link to it just before the </body> tag instead of putting all this within the page.

[-- IF PageMenu --]
<script type="text/javascript">
var liwidth = 0; ss_jQuery("ul#ShopSite > li").each(function() {liwidth += ss_jQuery(this).outerWidth();});
// add class to navigation menus with flyouts
ss_jQuery("ul#ShopSite").children().each(function(){var c = ss_jQuery(this).children("ul");if (c.length > 0) {ss_jQuery(this).addClass("flyout");}});
// Navigation Desktop Vs Mobile
function navDevice() {
	// IF navigation width is greater than it's container (mobile)
	if (liwidth > document.getElementById("navwidth").clientWidth) {
		localStorage.setItem("navwidth",document.getElementById("navwidth").clientWidth); // setting a localstorage cookie for faster loading
		localStorage.setItem("nav","mobilenav"); // setting a localstorage cookie for faster loading
		ss_jQuery("#navwidth").attr("class","mobilenav"); // add class for mobile layout
	}
	// ELSE navigation width is less than it's container (desktop)
	// set localstorage cookies, the hover functionality is done via CSS
	else {
		localStorage.setItem("navwidth",document.getElementById("navwidth").clientWidth); // setting a localstorage cookie for faster loading
		localStorage.setItem("nav",""); // setting a localstorage cookie for faster loading
		ss_jQuery("#navwidth").attr("class",""); // remove class for mobile layout
		ss_jQuery("ul#ShopSite").attr("style",""); // remove any styles that may have been added with a mobile layout
	}
}
ss_jQuery("a#navToggle").click(function(e){ss_jQuery("#ShopSite").slideToggle(); e.preventDefault; mobileClick(); return false;});
ss_jQuery("ul#ShopSite li.flyout > a").click(function(ev) {if (ss_jQuery("#navwidth").hasClass("mobilenav")) {ss_jQuery(this).parent().toggleClass("activeNav"); ev.preventDefault();}});
// Debouncer - navigation menu automatically changes as the browser is resized.
function debounce(func, wait, immediate) {var timeout; return function() {var context = this, args = arguments; var later = function() {timeout = null; if (!immediate) func.apply(context, args);}; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args);};};
var menuDebounce = debounce(function() {navDevice()}, 250);
window.addEventListener("resize", menuDebounce);
navDevice();
</script>
[-- END_IF --]

Last, add the necessary CSS to your stylesheet. Odds are you already have a CSS file that you are using for the styles in your custom template; add the CSS below to your existing CSS file.

/* Both Mobile And Desktop */
a#navToggle, ul#ShopSite ul, .mobilenav ul#ShopSite {display: none}
.mobilenav a#navToggle, .mobilenav ul#ShopSite li.activeNav ul {display: block}
nav {display: block; max-width: 100%}
ul#ShopSite, ul#ShopSite ul {margin: 0px; padding: 0px; list-style-type: none; min-width: 180px}
ul#ShopSite {display: block; letter-spacing: -5px}
ul#ShopSite > li {display: inline-block; padding: 0px; margin: 0px; letter-spacing: 0px; position: relative}
ul#ShopSite a {display: block; padding: 4px 10px; line-height: 30px; text-align: left; text-decoration: none}
ul#ShopSite li li a {line-height: 26px}
ul#ShopSite ul {position: absolute; top: 100%}
ul#ShopSite ul ul {top: 0px; left: 100%}
/* Desktop */
#navwidth:not(.mobilenav) ul#ShopSite li:hover ul {display: block;}
/* Mobile */
.mobilenav ul#ShopSite {width: 100%}
.mobilenav ul#ShopSite > li {display: block; padding: 0px; margin: 0px; letter-spacing: 0px; position: relative}
.mobilenav ul#ShopSite ul {position: relative; top: 0px; width: 100%}
.mobilenav ul#ShopSite ul ul {left: 0px}

NOTE: This CSS is really minimal. You will likely want to add text and background colors, font settings, etc.

Navigation Menu