Setting the mobi-Hybrid^® Template Menu to Stack

Support for Allwebco mobile web templates

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");
   	}
   
   

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;
   			}
   
   /* MENU WIDTH, PADDING, FONT FACE & COLOR */
   
   #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;
   			}
   
   /* MENU BACKROUND, BORDER & MARGINS */
   
   #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;
   			}