Setting the mobi-Hybrid® Template Menu to Stack

Support for Allwebco mobile web templates

Pinned Note
This support page contains recommendations, support and setup info for Allwebco Mobi-Hybrid® web templates.

Outdated: Information on this page is for 2014 and earlier templates. Check the copyright year in your template header.js.

How to set the menu in a mobi-Hybrid® template to stack:
There are two types of menus in mobi templates. Be sure you use the correct modifications below:

Menu Style #1:
Use only if your "style-mobi.css" has a class called ".menu". If you do not have this exact class skip to "Menu Style #2" below.

Back up your files first. Do the following steps to set the menu to stack one on top of each other in a mobi-Hybrid® template (See example image below).
  1. In the "menu.js" remove the class="menu" in each div for each menu link.
  2. Edit the class="menulink" for each menu item to class="menulink menu".
  3. Remove the <br> at the end of each line. You will remove all <br> except for the very last one. Each link will then look like the following:

    document.write('<div>'); document.write('<a href="index.html" class="menulink menu" accesskey="1">1. Home</a>'); document.write('</div>');

  4. In the "style-mobi.css" locate the ".menu" class near the bottom of the file. You will make 3 changes, change the width to auto. Add the line display: block; and remove the line float: left;. See highlighted code below.
    .menu	{
    	font-family: arial, helvetica, sans-serif;
    	font-size: 0.80em;
    	font-weight: normal;
    	width: auto;         /* CHANGE this line */
    	float: left;             /* REMOVE this line */
    	display: block;     /* ADD this line */
    	cursor: pointer;
    	text-align: left;
    	padding: 8px 5px 8px 5px;
    	margin: 0px 0px 6px 2px;
    	background-color: #FF0000;
    	border: #212328 1px solid;
    	background-image: url("picts-mobi/menu.jpg");
Mobile Hybrid Stacked Menu

Menu Style #2:
Use only if your "style-mobi.css" has a class called "#menunav li". If you do not have this exact class go to "Menu Style #1" above.

  1. Back up your files first. To stack your menu: In the "style-mobi.css" near the bottom of the file, you will make 6 total changes. See highlighted code below.
    /* MENU CODE */
    .menutable		{ width: 100%; }     /* ADD this new class */
    #menudiv		{
    		background-color: #5A0000;
    		padding: 8px 2px 8px 2px;
    		margin: 0px 0px 0px 0px;
    		border-top: #C0C0C0 0px solid;
    		border-bottom: #C0C0C0 0px solid;
    #menunav, #menunav ul 	{
    			width: 100%;
    			list-style: none;
    			padding: 0px;
    			margin: 0px;
    #menunav a 		{
    			color: #FFFFFF;
    			font: 1.0em arial, sans-serif;
    			font-weight: normal;
    			text-decoration: none;
    			text-align: center;
    			padding: 8px 5px 8px 5px;
    			width: 90px;            /* REMOVE this line */
    			display: block;
    			cursor: pointer;
    #menunav li 		{
    			background-color: #5A0000;
    			width: 100%;                           /* ADD this line */
    			display: inline-block;            /* REMOVE this line */
        			*display:inline;/* For IE*/       /* REMOVE this line */
        			*zoom:1;                                 /* REMOVE this line */
    			padding: 0px;
    			margin: 2px 0px 2px 0px;
    	/* MENU FADE UP */
    	transition: background 0.5s ease;
    	-webkit-transition: background 0.5s;
    			border: #8B4747 1px solid;
    			border-width: 1px 0px 1px 0px;