Horizontal menus

Throughout the Q5 theme I make extensive use of Horizontal Menus. The Header, Front page Central and Footer menus are all Horizontally aligned.

Menus lists in WordPress, are just that, Lists. They are contructed using the <ul> element. The lack of numbers / bullet-points in the menus is achieved by setting the list-style-type attribute to none

The mechanism to get the list displayed horizontally instead of vertically is to set the display attribute on the <li> element to inline. This can be achieved by either setting on the <li> element or setting it on the <ul> element and allowing it to be inherited.

However there is one issue with this. If you use the menu-image plugin to enable the use of images insteads of text, as we do on the front-page, then we have a problem. The menu-image plugin allows you to add an image caption. The image caption can be located in one of four locations relative to the image. And the mechanism for associating/locking the caption to the image is to set the display attribute of the <li> element to Block, which causes the menu to revert to a vertical alignment.

Hence why, at present, there is no caption text associated with the front page image menus.

Author: Steve Dickinson