Floating Header Icons

Header icons used in Allwebco templates

Support for Allwebco web templates that include clickable icons in the header. These icons may re-size or hide on mobile devices using code in the media-queries.css.



How header icons work
The header icons are floated on the page using absolute positioned css code.

Files used
You can edit the location and background colors in the "style.css" file. The icon file image name can be edited in the "header.htm" in the "includes" folder. Icons you can use are located in the "header-icons" or "picts" folder.

Editing the icon links
Open the "header.htm" in the "includes" folder in any plain text editor like Notepad or TextEdit on Mac. Edit the links starting on about line #20.

Changing icon images
A number of optional icons may be included in the "header-icons" or "picts" folder. Edit the name of the image in the "header.htm" in the "includes" folder with any image name in the "header-icons" or "picts" folder. Hover over any header icon image to see the image size.

Using your own images
Place your new image in the "header-icons" or "picts" folder. Edit the "header.htm" in the "includes" folder with your image name. Photoshop icon layered PSD file(s) you can use are in the "extras" folder.

Icon locations
The header icons float on the page using css "absolute" positioning. You can adjust the "right" (or left) px numbers in the "style.css" "HEADER ICONS" section.

Advanced: adding a 3rd icon
The header will include 2 icons. It is involved to add more icons. Follow these steps:

1. Note: Some cart templates may use different css class names like header-cart and header-shop.
2. In the "style.css" copy the 2 css styles for "ICON CODE GROUP 2". Paste it below itself in the css file.
3. Change the 2 pasted classes to .header-ico3 and .ico3-img.
4. Important: You must now edit the right location (right: 5px;) to a new number to locate the icon. The new number to use will probably be 87px.
5. In the "header.htm" in the "includes" folder, copy and paste the "<!-- ICON 2 -->" code group below itself. Edit the 2 classes in the pasted code group to .header-ico3 and .ico3-img.
6. Edit the image name used for the new icon in the "header.htm. Use one of the icons located in the "header-icons" or "picts" folder, or create your own.

Limit on number of icons you can have
If you add too many icons in the header it may be less mobile compliant. Additionally, the icons may layer over your logo. See Testing Media Queries Responsive CSS Code.