Skip navigation
Currently Being Moderated

Spry Menu Bar Background Colour

Jul 28, 2012 3:24 AM

Dear all,


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.


menu bar issue.png

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.



  • Currently Being Moderated
    Jul 28, 2012 4:32 AM   in reply to ClaireV2012

    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.

    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 5:12 AM   in reply to ClaireV2012

    Try this in your CSS



    ul.MenuBarHorizontal a {
        background-color: #89A8D2;

        color: #03172A;

        cursor: pointer;

        display: block;

        padding: 0.5em 2.86em;

        text-decoration: none;



    This is what it would look like in Firefox Click to see full size.


    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 7:10 AM   in reply to ClaireV2012

    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:


    .container {
        background-color: #FFFFFF;

        border-color: #666666;

        border-style: solid;

        border-width: thin;

        box-shadow: 5px 5px 5px #666666;

        margin-left: auto;

        margin-right: auto;

        width: 960px;



    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)



    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 5:38 AM   in reply to ClaireV2012

    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:


    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 7:24 AM   in reply to ClaireV2012

    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.

    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 11:02 AM   in reply to ClaireV2012

    Do you get Hazardous Duty Pay as a web developer for the IOM?


    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points