6 Replies Latest reply: Jul 4, 2012 5:42 PM by Zabeth69 RSS

    HOW TO CHANGE  spry 1.7 menu width

    62jayne Community Member

      need help on how to change the width of the sub menu on a vertical spry menu

      text runs off the container

       

      see this link to see the problem  It the Sub menu that over run..

       

      www.knottydog.com/KDproductions.html

       

      Any help greatly appreciated

      Larry

      lhemmerich@knottydog.com

        • 1. Re: HOW TO CHANGE  spry 1.7 menu width
          Zabeth69 CommunityMVP

          Larry, the width of the submenu on a vertical Spry Menu is in two places:

          1. The width of the unordered list that is the submenu container:
            ul.MenuBarVertical ul
            {
            ...
            width: 8.2em;
            ...
            }
          2. and the width of the undered list items that make up the submenu:

                    ul.MenuBarVertical ul li

                    {

                              width: 8.2em;

                    }

          Because of the way the submenu styling is set up, the items' text should run to one or more lines without escaping the borders. You will want to change the width in both places, to match your new submenu width.


          I would have gladly checked out your site, but the link does not work...

           

          Beth

          • 2. Re: HOW TO CHANGE  spry 1.7 menu width
            62jayne Community Member

            Sorry for the wrong link

             

            http://www.knottydog.com/KDProductions.html

             

            Take a look please,,Thanks

            • 3. Re: HOW TO CHANGE  spry 1.7 menu width
              Zabeth69 CommunityMVP

              In fact, your submenus are fine; your sub-submenus need attention.

               

              Presently, they are styled exactly as the submenus. To differentiate sub-submenus from submenus, add another style selector AFTER the other submenu styling, as here:

               

              This selector may stay:

               

              ul.MenuBarVertical ul li

              {

                        width: 8.2em;

              }

               

              Follow it immediately with this one, adjusted to the width YOU want to use:

               

              ul.MenuBarVertical ul ul,

              ul.MenuBarVertical ul ul li {

                        width: 12em;

              }

               

              Do not put it BEFORE the other submenu styling, or the other styling will cancel it out. Note that this is a group selector, with both the ul ul and the ul ul li in the same definition.

               

              Thanks for the functioning link; it was indeed helpful.

               

              Beth

              • 4. Re: HOW TO CHANGE  spry 1.7 menu width
                62jayne Community Member

                Thanks !!!!!!!!!!!!

                • 5. Re: HOW TO CHANGE  spry 1.7 menu width
                  62jayne Community Member

                  FOUND THE ANSWER$..After trying to fix this I finaly got it..

                  The answer was to ADD..width:autoas shown below

                   

                  #MenuBar .SubMenu .MenuItem .MenuItemLabel{

                  text-align:left;

                  line-height:1em;

                  background-color:#333333;

                  color:#ffffff;

                  padding: 6px 12px 6px 5px;

                  width: 7em;

                  width:auto;

                   

                  This is the link and you can see it works now:

                   

                  http://www.knottydog.com/KDProductions.html

                   

                  Larry

                  • 6. Re: HOW TO CHANGE  spry 1.7 menu width
                    Zabeth69 CommunityMVP

                    Nice simple fix, Larry, Congrats!

                     

                    Note that you are adding width: auto; and overriding the width: em; which you no longer need, although I frequently leave an old measure in place, in case I need to go back. Probably good idea to "comment" it out with /* width: 7em; */

                     

                    I also note that you are in a more recent version of menu than that for which I gave you specific fixes.

                     

                    Make sure your solution works in all browsers before you do handsprings, but it is possible that you have it!

                     

                    Beth