How do I get a spry menu to fit to the container size? I have the container set up like this:
margin: 0 auto;
And I want the spry menu to act as a border between the header and container, ive tried setting various parts to 80% as in the container but none seem to change the menu?
You will find several difficulties trying to set the menu up this way, none of them dreadful, luckily!
First off, set up a div for the Spry menu. Make sure it wraps around the entire ul.MenuBar etc. unordered list. Do not assign the class to the MenuBar itself.
Then set the class for the menu div to the .container class you have already set up, as <div class="container">. This will give the same outside dimensions as the principal container.
If you have a border around the principal container, give the menubar container div the same border width.
This should make the spry menu "as a border between the header and container" to be the same width as that container.
What do you want the menubar to look like? That is, presently the menu items will be a set size (I think they come in at 8.2em), and if you want them to stretch the width of the menubar container, you will need to use percentages for the main menu items' widths.
Ask if you want details on how to do that, or let me know what it is you are aiming for.
Figured it out, I needed to set the width to 100% in the ul.MenuBarHorizontal and then depending on how many menu items I had set the width to a % in the ul.MenuBarHorizontal li eg if I have 4 menu items I set the width to 25%
If you ever find you need to fit menu items of wildly different lengths into a menu, you can also use a percentage system, you will just need to give each menu item an ID and give each one a different percentage width in the CSS. It actually works pretty well. Just be careful on the submenus, if you use them. They don't always work well with percentages, so I typically use an actual width for submenus.
Europe, Middle East and Africa