I have a horizontal spry menu bar which I have changed from a full width bar (160px each item) to a bar with 2em padding to left and right of each item because 2 of the items are longer than the original specified width of the menu bar items.
The bar does not stretch full width now but I would like the colour of the bar to continue across the page. Currently after the last item the background is white.
I have enclosed it in a menu bar div which is inside the header div (that has a background colour of #03172A). The menu bar class has a background colour of #6DA8E2 and width of 960px (the entire width of the page)
I have tried setting the ul.MenuBarHorizontal class with a background of #6DA8E2 but nothing seems to change the background from white.
Just wondering if anyone knows where I am going wrong please? Or if there is a way to make the menu full width whilst having different size buttons. The only button that is an issue is the Professional Intermediary Services item.
Many thanks and any help is greatly appreciated.
Hi Claire -
It's very hard to give you the precise solution when you don't put you files online and provide a link so we can see all your code in the context of your site.
Are you trying to color the white background and/or space out your links to fill the entire menu bar width?
Your current online Spry CSS has no BG color specified for the bar.
Apologies Ken, I have now uploaded the index page to a test directory. http://www.simpl-e.im/test/index.html
I would like to either space the links out to fill the page width or change the colour to the background link colour so that the menu bar fills the width.
Many thanks for your help, Claire.
One more thought for you Claire.
If you don't mind a suggestion, see how you like the look of your "container" CSS
by adding the three bolded lines for a border to finish off the left side of your pages:
box-shadow: 5px 5px 5px #666666;
The left border would look like this. Click to see full width.
(disregard the text anomalies caused by my reducing view size for the purposes of this picture)
Thank you ever so much for your replies Ken, apologies for the delay in responding I have been away from the office for a few days.
I will update with these changes today and let you know how I get on.
Best regards, Claire.
Well, we missed you; hope you had a great time.
I just noticed that you are familiar with CSS shorthand in which case you can accomplish the left border I suggested with only this one new line (instead of three) in your container CSS
border: thin solid #C0C0C0;
Note I changed the color to soften the effect.
You can see the border effect here:
I have updated as per your previous email and I really like the border - good call.
With regard to the menu, it doesn't appear to work in Chrome or IE as it doesn't occupy the full width... just wondering if there is anyway to make the .menu_bar the same colour as the navigation menu please?
Many thanks, Claire.
Because the <li> tags in the menu_ bar <div> are floated you have to clear the floats in order for the <div> to wrap itself around the <li> tags.
Insert <br style="clear: both;" /> directly before the closing </div> menu_bar tag (see below)
<br style="clear: both;" />
</div><!--end .menu_bar -->
Then make the backgorund colour of the menu_bar css the same as your navigation items.