Mobile Click Menu & Icon Bar

Icon menu bar used in Allwebco templates

Support for Allwebco web templates that include a top "click" menu bar with icons. This type of menu is designed more for mobile viewing, but works on all devices.

Mobile Click Menu Icon Bar

How the menu works
The click menu uses jQuery to allow the drop menu to open when the "bars" icon is clicked. The menu closes when the bars are clicked again.

Files used
Code for the menu will be in the "header.js", "menu.js" or "icon-bar.js". The script file is located in the "JQuery" folder. Icons and the menu "bars" icon are located in the "header-icons" or "menu-icons" folder. Also see your template help page included with the download.

Editing the menu links
Open the "header.js", "menu.js" or "icon-bar.js" in any plain text editor like Notepad or TextEdit on Mac. Edit the links as shown in the visual below. Copy and paste any line to add a new link. Click visual below.


Editing the icons
The "header.js", "menu.js" or "icon-bar.js" includes a section to turn on and off the header icons with a yes or no variable. Click visual below.


Icons hiding for mobile
You should have only 6 icons showing on mobile and no more. The template uses the ".hidemobile" class to hide some icons when the browser width becomes narrow on mobile. Click visual below.


Editing the links to social sites
The icon bar includes links to Twitter and Facebook (and optionally LinkedIn that you can turn on). Edit these links starting after the "// START HEADER ICONS" note, or optionally switch these off in the yes/no variables near the top of the header.js, "menu.js" or "icon-bar.js". See visuals above.

Black or white icons
You can use black or white icons. Change the variable to black or white, all lowercase in the header.js, "menu.js" or "icon-bar.js". Click visual below.


Editing icon links
Any icon can have the link changed. Click visual below.


Limit on number of icons you can have
The limit is to have no more than 6 icons on mobile and 13 max for desktop. The "header.js", "menu.js" or "icon-bar.js" includes some examples of hiding icons on mobile. See section above.

Adding or creating new icons
All icon image files are located in the "header-icons" or "menu-icons" folder. A Photoshop icon layered PSD file you can use is in the "extras" folder.

In the "header.js", "menu.js" or "icon-bar.js" you can turn on and off the included icons. See section above "Editing the icons" and "Black or white icons".

You can create your own icons and place them in this folder and edit the "header.js", "menu.js" or "icon-bar.js" to use your new icons. Icon files should be .png files using a transparent background, but optionally you can also use .jpg or .gif files. Be sure you make a backup of the "header.js", "menu.js" or "icon-bar.js" before you start.

Mobile Websites Mobi-Hybrid® Web Templates