4 Replies Latest reply: Nov 16, 2010 5:32 AM by thersher RSS

    Can't set width of submenu properly

    thersher Community Member

      I'm trying to set the width of a sub-submenu, and I can't figure out exactly which property to change. Seems like I've tried them all, but without the result I'm looking for.

      The URL is www.theresasheridan.com, and I have submenus under the Portfolios menu item. I figured out the no-wrap, and the background image, but I can't get the width to set properly for the first line of my sub-submenu. My background image is 900px, and the same image I used for the main navigation div, so there's plenty of image there to work with.

      Any tips are much appreciated! You guys rock!

        • 1. Re: Can't set width of submenu properly
          Ben Pleysier CommunityMVP

          There are 4 places where the width can be stipulated

          ul.MenuBarHorizontal {
              width: auto;
          }

          This gives a width to the total SpryMenuBar

          ul.MenuBarHorizontal li {
              width: 8.2em;
          }

          This is the width for all menu items (both main menu and submenus)

          ul.MenuBarHorizontal ul {
              width: 8.2em;
          }

          This is the width of the container for the submenus. This is usefull if you wish to have multiple rows within the submenu drop-down.

          ul.MenuBarHorizontal ul li {
              width: 8.2em;
          }

          This overrides the menu item width set above and applies only to submenus

           

          If you want to set unique menu item widths, this can be achieve using an inline style rule as per following

            <li style="width: 3em;><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li style="width: 17em;><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>

          Items 2 and 4 will use the width as stipulated in the style sheet, the widths for items 1 and 3 have been overridden by the inline style rules.

           

          I hop the above will allow you to do what you want.

           

          Gramps

          • 2. Re: Can't set width of submenu properly
            thersher Community Member

            I'm still doing something wrong. Now I have the same problem on another site as well (the first site I have done a temporary work around). The

            site is http://www.bandhropehalters.com > Shop Online menu item. I have set the ul.MenuBarHorizontal ul li line to 17 em, which is way wider than necessary, but it still only shows up a certain width. When I make the change in DW, it displays properly for me, but then when I preview or upload the changes, it's not working properly.

            What am I missing here?

            • 3. Re: Can't set width of submenu properly
              Ben Pleysier CommunityMVP

              I guess I have to repeat what I have said before

              ul.MenuBarHorizontal ul {
                  width: 8.2em;
              }

              This is the width of the container for the submenus. This is usefull if  you wish to have multiple rows within the submenu drop-down.

              Try changing the above value form 8.2 to 16em

               

              Cheers,

              Gramps

              • 4. Re: Can't set width of submenu properly
                thersher Community Member

                Thank you, sorry about that, I misread it, thinking that would widen the main containers as well. That worked great, I appreciate the help!