We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 38666
    • 98 Posts
    I'm having trouble getting beyond a level two in what I would like to be a 4 level drop-down menu with bootsrap, My Navbar chunk is below...
    <!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
    	<div class="container">
    		<div class="navbar-header">
    			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    				<span class="sr-only">Toggle navigation</span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    			</button>
    			<a class="navbar-brand" href="/">[[++site_name]]</a>
    		</div>
    		<div class="navbar-collapse collapse">
    			<ul class="nav navbar-nav">
    				[[pdoMenu?
    					&startId=`0`
    					&level=`4`
    					&tplParentRow=`@INLINE
    					<li class="[[+classnames]] dropdown">
    						<a href="#" class="dropdown-toggle" data-toggle="dropdown" [[+attributes]]>[[+menutitle]]<b class="caret"></b></a>
    						<ul class="dropdown-menu">[[+wrapper]]</ul>
    					</li>`
    					&tplOuter=`@INLINE [[+wrapper]]`
    				]]
    			</ul>
    		</div><!--/.nav-collapse -->
    	</div>
    </div>
    


    Any help or suggestions to get this to work would be appreciated.

    Thanks
      Give a man the answer, and he’ll only have a temporary solution. Teach him the principles that led you to that answer, and he will be able to create his own solutions in the future.
      • 43068
      • 4 Posts
      have you found the solution? I have the same problem
        • 38666
        • 98 Posts
        Quote from: tempter at Oct 21, 2017, 02:55 PM
        have you found the solution? I have the same problem
        No, but after a lot of googling I discovered that the problem lies with Bootstrap 3. So I re-tooled our site to only two levels by moving things around and using non-menu-ed links in some areas. Not what I had intended and a lot of work but in the end everyone is happy with the result.
          Give a man the answer, and he’ll only have a temporary solution. Teach him the principles that led you to that answer, and he will be able to create his own solutions in the future.
          • 37104
          • 19 Posts
          I found a workable solution to this problem in this thread: https://forums.modx.com/thread/101884/pdomenu-different-tamplates-for-each-level

          Basically, use the [[+level]] attribute to define different templates for &tplParentRow. For the site I am working on, the first pass at this is to simply have anything below level 1 render very simply and then just give it a bit of style in the CSS. In other words, all parent rows below the top level have the Bootstrap classes that cause dropdown behavior removed, only the top level has those classes. Theoretically one could use this approach to then use the dropdown-submenu class of Bootstrap 3 to do fancier stuff.

          My site: http://www.chocolatebunnyproductions.com/events/rocky-mountain-race-series/bike-granby-ranch

          I believe to use this approach, you have to define a chunk for &tplParentRow as it won't work (?) with the @INLINE template. The chunk I used looks like this:

          [[+level:is=`1`:then=`
          					<li class="[[+classnames]] dropdown" id="menu[[+id]]-level[[+level]]">
          						<a href="[[+wf.link]]" class="dropdown-toggle" data-toggle="dropdown" data-target="#menu[[+id]]" [[+attributes]]>[[+menutitle]]<b class="caret"></b></a>
          						<ul class="dropdown-menu">[[+wrapper]]</ul>
          					</li>
          `:else=`
          					<li class="[[+classnames]]" id="menu[[+id]]-level[[+level]]">
          						<a href="[[+wf.link]]" [[+attributes]]>[[+menutitle]]</a>
          						<ul>[[+wrapper]]</ul>
          					</li>
          `]]


          And the pdoMenu snippet call looks like this, pretty standard here:

          				[[pdoMenu?
          					&startId=`0`
          					&level=`3`
          					&templates=`-5,-7`
          					&tplParentRow=`parentRowTpl`
          					&tplOuter=`@INLINE [[+wrapper]]`
          				]]
            The older I get, the faster I was.

            http://www.evanchute.com/