New Community Forums are coming. Watch this space for news.
Subscribe: RSS
  • @eladnova just add this line of css some where on your page after you load bootstrap.

    .dropdown:hover>ul{display:block}
    


    That will show all uls that are a child of any li with the class dropdown and display it on hover.

    Hope that helps, good luck.
      Benjamin Marte
      Interactive Media Developer
      Follow Me on Twitter | Visit my site | Learn MODX
    • Cheers benmarte. Will try it later:)
        ...
      • Quote from: rx2 at Nov 19, 2013, 10:46 PM
        My Wayfinder call:

        [[Wayfinder?
            &startId=`0`
            &level=`0`
            &outerTpl=`mmouterTPL`
            &rowTpl=`mmrowTPL`
            &rowClass=dropdown 
            &hereClass=active
        ]]
        



        The mmrowTPL (you have to have the Switch Extra installed):

        [[!switch?
            &get=`[[+isfolder]]`
            &c1=`0` &do1=`<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>`
            &c2=`1` &do2=`<li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">[[+wf.linktext]] <b class="caret"></b></a>
            [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]
            </li>`
            &default=`<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>`
        ]]
        


        My little fix for mmrowTPL
        <li [[+wf.classes]]>
            <a class="dropdown-toggle" [[!switch? &get=`[[+isfolder]]` &c1=`1` &do1=`data-toggle="dropdown"` &default=``]] href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]  
             [[!switch? &get=`[[+hasChildren]]` &c1=`1` &do1=`<b class="caret"></b>` &default=``]] 
            </a>
            [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]
        </li>
        


        this makes being a container does not have the ability to click (title), on the contrary and having children can follow a link.

        Regards! [ed. note: erloko last edited this post 4 years, 10 months ago.]
        • Quote from: phijui at Dec 08, 2013, 04:24 AM
          You can do it with one wayfinder call. Lighter than the previous solution in the resource cache

          Wayfinder call:

          [[Wayfinder? &startId=`0` &level=`2` &outerTpl=`NavbarOuter` &rowTpl=`NavbarRow` &activeParentRowTpl=`NavbarActiveParentRow` &parentRowTpl=`NavbarParentRow` &innerTpl=`NavbarInner` &innerRowTpl=`NavbarInnerRow` &firstClass=`` &lastClass=`` &removeNewLines=`1`]]


          NavbarOuter:

          <ul class="nav navbar-nav">[[+wf.wrapper]]</ul>


          NavbarRow:

          <li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>[[+wf.wrapper]]


          NavbarParentRow:

          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[+wf.title]]">[[+wf.linktext]] <b class="caret"></b></a>[[+wf.wrapper]]</li>


          NavbarActiveParentRow:

          <li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[+wf.title]]">[[+wf.linktext]] <b class="caret"></b></a>[[+wf.wrapper]]</li>


          NavbarInner:

          <ul class="dropdown-menu">[[+wf.wrapper]]</ul>


          NavbarInnerRow:

          <li class="divider"></li>
          <li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>


          With a custom css rule:

          .dropdown-menu li.divider:first-child {
            display: none;
          }




          </li[[+wf.classes]]></li[[+wf.classes]]>

          I tried this, but can't seem to get it to work. I'm using MODX Revolution 2.2.14-pl (traditional). I have copied and pasted the above way finder call and it's chunks 3 times to double check that I have the same thing.

          Here is the html that it is outputting along with some comments I put in to show what is missing:
          <nav class="collapse navbar-collapse bs-navbar-collapse pull-right"role="navigation">  
          	<ul class="nav navbar-nav">
          		<li><!-- missing class="dropdown"-->
          			<a href="index.php?id=3" title="Insurance">Insurance</a>
          			<!-- missing href="#" class="dropdown-toggle" data-toggle="dropdown"-->
          
          			<ul class="dropdown-menu">
          				<li class="divider"></li>
          				<!-- href="#" class="dropdown-toggle" data-toggle="dropdown"-->
          				<li><a href="index.php?id=2">Auto</a></li><li class="divider"></li>
          				<li><a href="index.php?id=5">Auto2</a></li>
          			</ul>
          		</li>
          
          		<li>
          			<a href="index.php?id=4" title="Compare Rates">Compare Rates</a>
          		</li>
          	</ul>
          </nav>
          


          I'm really stuck on this and don't know what to do.
          • Bootstrap 3 navbar menu

            [[Wayfinder?                   
              &startId=`0`
              &level=`2`
            	&outerClass=`nav navbar-nav`
            	&innerClass=`dropdown-menu`
            	 &hereClass=`active`
            	&rowTpl=`menuNavbarRow`
            	&innerRowTpl=`menuNavbarSubmenu`
            ]]


            Chunk menuNavbarRow

            <li class="[[+wf.classnames]][[+wf.isfolder:is=`1`:then=` dropdown`]]">
            	<a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]"
                	title="[[+wf.title]]" [[+wf.isfolder:is=`1`:then=`class="dropdown-toggle" data-toggle="dropdown"`]] 
                	[[+wf.attributes]]>[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]
                </a>
            	[[+wf.wrapper]]
            </li>


            Chunk menuNavbarSubmenu

            <li class="dropdown-submenu"><a href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
            • Michael Leipold-Haas Reply #16, 3 years, 2 months ago
              Thats cool ezersky – exactly what I was searching for! Thank you so much.
              • Quote from: ezersky at Sep 10, 2015, 07:10 PM
                Bootstrap 3 navbar menu

                [[Wayfinder?                   
                  &startId=`0`
                  &level=`2`
                	&outerClass=`nav navbar-nav`
                	&innerClass=`dropdown-menu`
                	 &hereClass=`active`
                	&rowTpl=`menuNavbarRow`
                	&innerRowTpl=`menuNavbarSubmenu`
                ]]


                Chunk menuNavbarRow

                <li class="[[+wf.classnames]][[+wf.isfolder:is=`1`:then=` dropdown`]]">
                	<a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]" title="[[+wf.title]]" [[+wf.isfolder:is="`1`:then=`class="dropdown-toggle"" data-toggle="dropdown" `]]="" [[+wf.attributes]]="">[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]
                    </a>
                	[[+wf.wrapper]]
                </li>


                Chunk menuNavbarSubmenu

                <li class="dropdown-submenu"><a href="[[+wf.link]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

                Hi, this solution works best so far, with the other solutions on previous pages Wayfinder wasn't picking up CSS for some reason.
                But I still have some issues if I could get help from someone? The dropdown doesn't work, I suspect it's because there is no sub-menu items linked - I've created weblinks in the document tree because the submenu items are to link to an external site, how do I add them?

                And two, the menu in mobile is constantly showing, it's not hiding like it should.

                Any help would be greatly appreciated.
                Thanks all for your awesome help!
                • Quote from: ezersky at Sep 10, 2015, 02:10 PM
                  Bootstrap 3 navbar menu

                  [[Wayfinder?                   
                    &startId=`0`
                    &level=`2`
                  	&outerClass=`nav navbar-nav`
                  	&innerClass=`dropdown-menu`
                  	 &hereClass=`active`
                  	&rowTpl=`menuNavbarRow`
                  	&innerRowTpl=`menuNavbarSubmenu`
                  ]]


                  Chunk menuNavbarRow

                  <li class="[[+wf.classnames]][[+wf.isfolder:is=`1`:then=` dropdown`]]">
                  	<a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]" title="[[+wf.title]]" [[+wf.isfolder:is="`1`:then=`class="dropdown-toggle"" data-toggle="dropdown" `]]="" [[+wf.attributes]]="">[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]
                      </a>
                  	[[+wf.wrapper]]
                  </li>


                  Chunk menuNavbarSubmenu

                  <li class="dropdown-submenu"><a href="[[+wf.link]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

                  Thanks for this @ezersky, worked perfectly!