Categories: Insights

Navigation height glitch – AheadWorks iPhone theme

Navigation height glitch - AheadWorks iPhone theme

Fixing the height of the store navigations container is not as hard as you might think it is. The following steps will show you how to fix it using CSS to change the height of the store navigations container so that it relates to its current active contents and not the longest set of categories overall.

If you’re not a web developer yourself you might want to talk to your web design company about getting them to do this fix for you.

As standard the navigations height will be added using JavaScript and will be the height of your longest set of categories. This is fine if your categories get progressively shorter, but if like me you have three main categories, one of which has 10 sub categories your navigation will be the height of 10 categories regardless of how many are actually active, causing an empty space to be present when fewer categories are active.


1. Navigate your way to the navigation.css file inside of your AW theme folder:

2. Skin > frontend > aw_mobile > iphone > css > navigation.css

Now you need to edit the CSS of two id’s

3. First find “div.header-nav-container div.current, div.header-nav-container div.visible” and add the following CSS:

  • overflow: hidden;
  • position: relative;

4. Next find “.header-nav-containerand replace the current CSS with:

  • {
  • float: none;
  • margin: auto;
  • position: relative;
  • width: 100%;
  • height: auto;
  • }

Your homepage’s content should now take into account the height of each set of active navigation items and move up and down accordingly. Rather than leaving a large gap.

Apart from this frustrating little glitch the AheadWorks iPhone theme is really good! Fast to load with everything you need from a mobile website theme, plus little need for customisation.

Also don’t be fooled by the name, this plug-in is compatible with all the major smartphones and tablets. Well worth the investment!

Alistair Roberts :