This topic describes how to add a new tab element to the Navigation Bar in the Aptify Mobile for Members user interface.

HTML Structure

1. Locate the following:
   
   
   

   <div data-role="footer" data-position="fixed" data-theme="h">
   <div data-role="navbar" class="navbar-btm">
   <ul>

   
   
   

2. Add a new list item <li> under the <ul>

3. Give it a unique ID (_nb denotes navbar, not mandatory to add but separates from the rest).
   
   For example:
   
   
   

   <li> 
    <a href="pagelocation.html" id="mynewtab_nb" data-icon="custom" 
    data-iconpos="top" data-iconshadow="false" data-theme="h">New Tab</a> 
   </li>

Changing the Icon in CSS Styles

1. Locate - /**********Nav_bar_Styles******/ in styles/aptify.mobile.css

2. This holds styles for the navigation bar structure and design. Add the New Tab's icon selector as a part of the structure.
   
   Locate:

   #upcoming-events_nb .ui-icon, #all-events_nb .ui-icon, #my-events_nb .ui-icon, #myprofile_nb .ui-icon, #orderhistory_nb .ui-icon, #myconnections_nb .ui-icon, #btnNews .ui-icon, #btnTwitter .ui-icon, #btnFacebook .ui-icon, #sessions_nb .ui-icon, #speakers_nb .ui-icon, #housing_nb .ui-icon, #attendees_nb .ui-icon{ width:25px;height:30px;top:3px;border-radius:0px;-webkit-border-radius:0px;} 

   
   
   
   

3. Add the new tab's ui-icon class as a selector in the above list.
   
   
   For example:

   #mynewtab_nb .ui-icon, #upcoming-events_nb .ui-icon, #all-events_nb .ui-icon, #my-events_nb .ui-icon, #myprofile_nb .ui-icon, #orderhistory_nb .ui-icon, #myconnections_nb .ui-icon, #btnNews .ui-icon, #btnTwitter .ui-icon, #btnFacebook .ui-icon, #sessions_nb .ui-icon, #speakers_nb .ui-icon, #housing_nb .ui-icon, #attendees_nb .ui-icon{width:25px;height:30px;top:3px;border-radius:0px;-webkit-border-radius:0px;} 

   
   
   

   • This will add the newtab's ui-icon the same styles (dimensions) as the other tabs.
4. Add the icon to the images folder.
5. Create a new style below as follows: #mynewtab_nb .ui-icon{background:url(images/newicontab.png) no-repeat left top;}
6. For more info on using Navigation Bars and Custom icons, visit this page:
   
   http://demos.jquerymobile.com/1.4.5/navbar/