Posted by iainh on July 29, 2011 at 4:53pm
I'm styling a horizontal menu in User Bar First region.
How do I align each list element with the grid in a general way that would still hold good if the containing grid was changed later?
Aligning horizontal menu items with grid
Comments
My solution
I don't know whether you think this is over the top, or not the best way, but it works and I'm very pleased with the results in my particular application which will be visited by more than average number of visually impaired viewers.
It was important for the design of the page that each element of the horizontal menu remained 'in sync' with the grid and this has been achieved so that viewers zooming in will get the same layout in the same proportions as the original.
So I created several new regions in the Menu Zone and each menu item is a custom block dropped into one of these new regions.
It only takes a couple of minutes to do this anyway, so it'll be no burden if a new menu item needs to be added at a later date.
Adding the new regions in the Omega theme was dead easy: just adding one line to the sub theme's info file for each new region; from there I used the Omega/ Delta UI to assign the new region to the menu zone and adjust the weights and column widths of all the regions in the zone. Then over to Context's UI to add the new blocks to the new Regions .... and that's it.
Next: The menu zone doesn't break up into a narrow media view quite how I want so I might look at breaking the existing menu zone up into two menu zones or just hide the narrow top menu bar altogether.