We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 30912
    • 463 Posts
    Hi all,

    Im doing yet anotehr site and i have with some success added a 3rd level to a nav, however when i get to the last item it drops down then goes off the page (which is fine on high resolution monitors.

    anyway the test site is http://wakies.aspiredevelopmentserver.co.uk/

    and the culprit is GetConnected

    I ahve used the standard drop down parametrs from MuddyDogPaws but added below and the css is below.

    is there any way to make the last item hover align right and fly out to the left

    call:
    [[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]] 


    CSS:

    /* common styling */
    .menu {
    font-family: Verdana, arial, sans-serif; 
    width:750px; 
    position:relative; 
    margin:0; 
    text-align:center;
    
    z-index:200;
    padding-top:12px;
    padding-left:5px;}
    
    .menu ul li a, .menu ul li a:visited {
    display:block; 
    text-decoration:none; 
    width:105px; 
    height:20px; 
    
    color:#fff; 
    
    line-height:20px; 
    font-size:12px; 
    
    overflow:hidden;
    }
    
    .menu ul {padding:0; 
    margin:0;
    list-style-type: none; }
    
    .menu ul li {float:left; 
    position:relative;
    }
    
    .menu ul li ul {display: none;
    }
    
    /* specific to non IE browsers */
    .menu ul li:hover a {
    color:#fff; 
    background:#000;
    font-size:12px;
     }
    
    .menu ul li:hover ul {
    display:block; 
    position:absolute; 
    top:20px; 
    left:0; 
    width:104px;
    font-size:11px;
    font-weight:normal;
     }
     
    /*second level*/
    .menu ul li:hover ul li a.hide {background:#000000; color:#fff;}
    .menu ul li:hover ul li:hover a.hide {background:#cccccc; color:#000000;}
    .menu ul li:hover ul li ul {display: none;}
    
    
    .menu ul li:hover ul li a {display:block; background:#000000; color:#ffffff; width:160px; text-align:left; padding-left:5px; font-size:11px; }
    .menu ul li:hover ul li a:hover {background:#cccccc; color:#000000;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:165px; top:0;}
    .menu ul li:hover ul li:hover ul.left {left:-165px;}
    
    
    


    im still learning all the time but this is causing me a headache

    TIA

      • 16183
      • 1,390 Posts
      Quick and untested thoughts...

      I think you will need to apply a negative left position (or some positive right) to those 3rd level menu items, maybe something like

      li ul li ul li a {position: relative; left: -300px; top: 25px;} 


      Not tested and don’t know if it will work - am no CSS expert wink. But, then this will need to be for "Get Conected" only, so it will need to have a specific class/id. Since it is a last item, WF should apply "last class to Get Connected". At the moment it is being applied to the <a>. Maybe move your wf.classes to the li instead so that it can be applied to the li instead?

      On a friendly and sincere note though, you have a  beautiful site but IMHO the 3 level menu is killing it. Have two maybe, or split it? That’s just my 2 cents.

      cheers/k
        • 30912
        • 463 Posts
        Thanks, i think your right it will most likely require its own Id, might have to read on that.

        As for the 3 level - that im afraid is totally beyond my control our client was 100% stuck on having a 3 level nav - despite the fact its covered in the subsections

        We did try to dissuade them - i havent seen a 3rd level navigation in a long long time
          • 16183
          • 1,390 Posts
          The "pain" clients cause us, hehe...

          There’s two ways you can give "GetConnected" its own id

          1. Use the &rowIdPrefix parameter. This will need the wf.id placeholder , or better...

          2. Use the new Wayfinder 2.5 beta - you can have a lastRowTpl - you can then use this to insert an id or different class

          http://modxcms.com/forums/index.php?topic=33904.0 - WF 2.5 beta

          cheers/