Wayfinder with Bootstrap - My Forums

Re: Wayfinder with Bootstrap

mick2470 — Apr 12, 2017, 02:55 PM

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


	[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=``]]
    
	[[+wf.wrapper]]

Chunk menuNavbarSubmenu

[[+wf.linktext]][[+wf.wrapper]]

Thanks for this @ezersky, worked perfectly!

Re: Wayfinder with Bootstrap

breno785au — Jan 30, 2016, 04:23 PM

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


	[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=``]]
    
	[[+wf.wrapper]]

Chunk menuNavbarSubmenu

[[+wf.linktext]][[+wf.wrapper]]

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!

Re: Wayfinder with Bootstrap

mleipoldhaas — Nov 25, 2015, 07:09 AM

Thats cool ezersky – exactly what I was searching for! Thank you so much.

Re: Wayfinder with Bootstrap

ezersky — 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


	[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=``]]
    
	[[+wf.wrapper]]

Chunk menuNavbarSubmenu

[[+wf.linktext]][[+wf.wrapper]]

Re: Wayfinder with Bootstrap

aaron4osu — Jun 20, 2014, 10:30 AM

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:
[[+wf.wrapper]]
NavbarRow:
[[+wf.linktext]][[+wf.wrapper]]
NavbarParentRow:
[[+wf.linktext]] [[+wf.wrapper]]
NavbarActiveParentRow:
[[+wf.linktext]] [[+wf.wrapper]]
NavbarInner:
[[+wf.wrapper]]
NavbarInnerRow:
[[+wf.linktext]]
With a custom css rule:
.dropdown-menu li.divider:first-child {
  display: none;
}

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:

  
	
		
			Insurance
			

			
				
				
				Auto

				Auto2
			
		

		
			Compare Rates

I'm really stuck on this and don't know what to do.

Re: Wayfinder with Bootstrap

erloko — Apr 11, 2014, 04:15 PM

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=`[[+wf.linktext]]`
    &c2=`1` &do2=`
    [[+wf.linktext]] 
    [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]
    `
    &default=`[[+wf.linktext]]`
]]

My little fix for mmrowTPL


    [[+wf.linktext]]  
     [[!switch? &get=`[[+hasChildren]]` &c1=`1` &do1=`` &default=``]] 
    
    [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]

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

Regards!

Re: Wayfinder with Bootstrap

eladnova — Feb 12, 2014, 02:51 AM

Cheers benmarte. Will try it later:)

Re: Wayfinder with Bootstrap

benmarte — Feb 11, 2014, 02:29 PM

@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.

Re: Wayfinder with Bootstrap

eladnova — Feb 11, 2014, 10:43 AM

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

Hi phijui

Thanks for sharing that. Works beautifully for me.
Did you come across any guidelines for triggering the drop down on MouseOver instead of on click?

Re: Wayfinder with Bootstrap

zooba — Feb 05, 2014, 12:25 PM

Hi rx2 and others,
I have a slightly more complicated menu for a site I'm working on.

I've followed rx2 code and got the basics working, however I need help to expand this a little further if possible.

Attached is a screenshot for you to quickly see what I'm after. I have the html coded below ready to setup in Modx.

So the basics I have working. Now I need to expand on the code that pulls in the drop down menu to look at the site tree and bring back second level (Advice,Investment,Services) as titles, then display the sections within each second level.

Please can anyone help me to get this working please, and point me in the right direction. I'm sure I need to expand/ code more inside mminnerTPL to pull in the extra html to handle but not sure how to.

Thank you guys!

Financial Management
Advice
- Thinking about investment
- Seeking advice
- Thinking about retirement

Investment
- Investment Advice
- Wealth Management
- Rebalancing/ Fund Switch

Services
- Our service agreement
- Trustees
- Fee Agreement

Investment Management
Investment
- Thinking about investment
- Seeking advice
- Thinking about retirement

Portfolios
- Portfolio 1
- Portfolio 2
- Portfolios 3

Services
- Our service agreement
- Trustees
- Fee Agreement

etc...


  
  
     
		
            Financial Advice
              
                
                    
                    	Advice
                        
                            Seeking Independent Advice
                        
                    
                    
                    	Investment
                        
                            Investment Advice
                        
                    
                    
                    	Services
                        
                            Our Service Agreement
                        
                    
                
            
        
        
            Qualifying Workplace Pensions
              
                
                    
                    	Advice
                        
                            Seeking Independent Advice
                        
                    
                    
                    	Investment
                        
                            Investment Advice
                        
                    
                    
                    	Services
                        
                            Our Service Agreement