Using Topbar with Foundation 5 + Wayfinder

28 Posts

ridgedale Reply #1, 9 years, 9 months ago

Hi. This is my first post so apologies if this topic has been started in the wrong forum section.

I have manually installed MODX 2.3 without any errors. A real bonus since this is the first time I've delved into CMS software. !

Note: I'm setting up a test website which is located in a sub-directory under /htdocs.

I subsequently installed the full foundation4 and full foundation5 default template extras without any problems.
I then installed the flexibility4 template extra which generated some errors - can't remember exactly what that was related to but the net result was the figure "1" appearing at the top of every page. When I inspected the element, the digit is in the header appears to be associated with the lexicon module of the flexibility4 extra.
Anyway I decided to move back to the foundation5 template as given my manual website coding background I realised I would probably learn more by building everything from scratch and integrating the MODX data field codes (please excuse the terminology!).

What I am trying to achieve is to use the Topbar styling to style the navigation system dynamically being built by Wayfinder.
From what I can see the Topbar code is included with the full foundation5 template extra and the Wayfinder extra was installed as part of the flexibility4 template extra. All the installed extras have been updated to the latest available version as of yesterday.

I have setup the following pages by adding new Documents to the website under the Resources tab. I've split the foundation5 index.html into the following:

/assets/templates/foundation5_modx/hny_f5_tmplt_main.html
/assets/templates/foundation5_modx/chunks/hny_f5_tmplt_navbar.html
/assets/templates/foundation5_modx/chunks/hny_f5_tmplt_navbar_inner.html
/assets/templates/foundation5_modx/chunks/hny_f5_tmplt_navbar_row.html
/assets/templates/foundation5_modx/chunks/hny_f5_tmplt_header.html
/assets/templates/foundation5_modx/chunks/hny_f5_tmplt_footer.html

The relevant code is as follows:

hny_f5_tmplt_main.html:

[[$hny_f5_tmplt_header]]

[[$hny_f5_tmplt_navbar]]

    <div class="row">
        <div class="large-12 columns">
            <h1>[[*pagetitle]]</h1>
            [[*content]]
        </div>
    </div>
        
[[$hny_f5_tmplt_footer]]

hny_f5_tmplt_header.html:

<!doctype html>
<html class="no-js" lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Foundation | Welcome</title>
		<link rel="stylesheet" href="assets/templates/foundation5_modx/css/foundation.css" />
		<script src="assets/templates/foundation5_modx/js/vendor/modernizr.js"></script>
	</head>
<body>

hny_f5_tmplt_navbar.html:

<div class="clear"></div>
	<div class="contain-to-grid sticky">
		<div id="dropdown-holder" class="grid_16">
			<div class="nav_bg pngfix">
				[[Wayfinder? &startId=`0` &rowTpl=`hny_f5_tmplt_navbar_row` &innerTpl=`hny_f5_tmplt_navbar_inner` &outerClass=`has-dropdown` &innerClass=`dropdown` &parentClass=`has-dropdown`]]
			</div>
		</div>
	<!-- end dropdown-holder -->
	</div>
<div class="clear"></div>

hny_f5_tmplt_footer.html:

		<script src="assets/templates/foundation5_modx/js/vendor/jquery.js"></script>
		<script src="assets/templates/foundation5_modx/js/foundation/foundation.js"></script>
		<script src="assets/templates/foundation5_modx/js/foundation/foundation.topbar.js"></script>
		<script>
			$(document).foundation();
		</script>
	</body>
</html>

hny_f5_tmplt_navbar_inner.html:

<!-- innerTpl -->
<ul class="nav nav-list [[+wf.classnames]]">
[[+wf.wrapper]]
</ul>

hny_f5_tmplt_navbar_row.html:

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

What I am getting is not what I was expecting as you will see from the attached screen grab.
As far as I can tell everything is linked correctly, so I can only assume in my ignorance I've got the coding wrong. sad

Any advice would be greatly appreciated. Thanx.

Dene

This question has been answered by multiple community members. See the first response.

463 Posts

chrisandy Reply #2, 9 years, 9 months ago

Here's your figure 1 answer…

http://forums.modx.com/thread/92145/problem-with-snippets---snippets-add-1-at-the-end-of-the-output-since-update-to-2-3#dis-post-503477

Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk

discuss.answer

463 Posts

chrisandy Reply #3, 9 years, 9 months ago

I'm more familiar with flex 4 but your hny_f5_tmplt_navbar.html: doesn't look right to me.

Surely you need 'nav class' somewhere? I don't believe 'grid_16' is something that has come from Foundation either?

Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk

discuss.answer

28 Posts

ridgedale Reply #4, 9 years, 9 months ago

Thanks for the feedback, chrisandy.

I have to admit I did a Google search and modified the code I found to create the hny_f5_tmplt_navbar.html, hny_f5_tmplt_navbar_inner.html and hny_f5_tmplt_navbar_row.html files. Clearly that was a big mistake. sad

I've had a quick look at the flexibility4 navigation templates that appear to be using Wayfinder:
flex_main-nav_CategoryTpl, flex_main-nav_innerTpl and flex_main-nav_rowTpl but I can't see how these chunks are being referenced by the flexibility4 templates.

Maybe it might be possible to work it out based on the flexibility 4 template and code?

flex_template_header (excerpt):

...
        <div class="row">
            <nav class="small-12 columns">
                [[++flex_main_navigation_type:is=`1`:then=`
                    [[Wayfinder? &startId=`0` &level=`3` &outerTpl=`flex_main_nav_outerTpl` &innerTpl=`flex_main_nav_innerTpl` &outerClass=`top-bar` &innerClass=`dropdown` &parentClass=`has-dropdown` &categoryFoldersTpl=`flex_main_nav_categoryTpl`]]
                `:else=`
                    [[Wayfinder? &startId=`0`]]
                `]]
            </nav>
        </div>
...

flex_main_nav_categoryTpl:

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

flex_main_nav_innerTpl:

<ul[[+wf.classes]]>
	[[+wf.wrapper]]
</ul>

flex_main_nav_outerTpl:

<ul id="topnav"[[+wf.classes]]>
	<ul class="title-area">
		<!-- Title Area -->
		<li class="name"></li>
		<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		<li class="toggle-topbar menu-icon">
			<a href="#"><span></span></a>
		</li>
	</ul>

	<section class="top-bar-section">
		<ul class="left">
			[[+wf.wrapper]]
		</ul>
	</section>
</ul>

Questions:
1) Where can I find any information on the following code segment?

[[++flex_main_navigation_type:is=`1`:then=` ...  `]]

2) How would I go about adapting the above flexibility4 code elements to incorporate the Topbar styling?

Thanks again.

28 Posts

ridgedale Reply #5, 9 years, 9 months ago

I think I've worked this out for myself! Thanks again for your input chrisandy.

discuss.answer

463 Posts

chrisandy Reply #6, 9 years, 9 months ago

Sorry I didn't see your post above. The chunks are referenced in the Wayfinder call.

In this particular chunk: flex_main_nav_outerTpl:

You will need to change the outermost ul to a div.

Don't worry about that code snippet - it should work 'straight out of the box'.

Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk

28 Posts

ridgedale Reply #7, 9 years, 9 months ago

That's no problem. Thank you for all your feedback. Much appreciated.

Answered Using Topbar with Foundation 5 + Wayfinder