Parent Item of Foundation 5 Top Bar Menu Not Available on Mobile

1,078 Posts

mmcgee Reply #1, 10 years, 3 months ago

Ran into an issue using Foundation 5 Top Bar with Wayfinder in MODx 2.2.10, where my container or parent item was accessible when viewing the site on desktops, but not on mobile or smaller screens. When viewed on mobile, the clicking the parent item only loads the items of the child pages.

Adding this code solved the problem, and on mobile adds the parent item as an available option.

data-options="mobile_show_parent_link: true"

So in my Tpl it looks like this:
<nav [[+wf.classes]] data-topbar data-options="mobile_show_parent_link: true">

Hope others who may be having the same issue find this helpful.

Keep Calm & Code On. [ed. note: mmcgee last edited this post 10 years, 3 months ago.]

180 Posts

troubadour Reply #2, 10 years, 1 month ago

Hi !

i also went on Foundation 5.
do you have a full wayfinder menu example ?
could you post it here please ?

thanks a lot !

1,078 Posts

mmcgee Reply #3, 10 years, 1 month ago

OK...Pardon my work. There was a lot of trial and error with this, so there may be a couple of chunks if not more that are not needed. I have intentions of going back in to my site and removing one by one to determine which are needed and not.

Notice that I commented out the title (logo) portion. I found it too confining and not tall enough. So I set up two columns. One for holding a logo and one for holding the navigation menu.

Start with the main_nav_innerTpl and main_nav_outerTpl chunks and see if that gets it up and running. I've put the remaining chunks below that as well for you to experiment. Sorry I'm being sloppy. I just haven't had time to go back in and clean it up.

<!-- main_nav_innerTpl -->
<!--Holds Navigation sub ul code-->

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

<!-- main_nav_outerTpl -->
<!-- Holds the code for the outer ul container-->

<nav [[+wf.classes]] data-topbar data-options="mobile_show_parent_link: true">
    <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="#">Menu</a>
        </li>
    </ul>
 
    <section class="top-bar-section">
        <ul class="left">
            [[+wf.wrapper]]
        </ul>
    </section>
</nav>

<!-- WAYFINDER CALL-->

[[Wayfinder?
&startId=`0`
&level=`3`
&outerTpl=`main_nav_outerTpl`
&innerTpl=`main_nav_innerTpl`
&outerClass=`top-bar`
&innerClass=`dropdown`
&parentClass=`has-dropdown`
]]

<!-- innerRowTpl -->
<!-- This is for the items buried deeper into the submenu -->

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

<!-- innerTpl -->

<ul class="[[+wf.classnames]]">
[[+wf.wrapper]]
</ul>

<!-- outerTpl -->
<!--Description: Holds the code for the outer ul container-->

<ul class="[[+wf.classnames]]">
[[+wf.wrapper]]
</ul>

<!-- ParentRow -->
<!--Description: Chunk for the items that are folders with children (aka containers) -->
<li [[+wf.id]]class="[[+wf.classnames]]">

<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a><a href="#" class="flyout-toggle"><span> </span></a>
[[+wf.wrapper]]
</li>

<!-- rowTpl -->
<!-- Holds the HTML code for the row items at the first level-->

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

[ed. note: mmcgee last edited this post 10 years, 1 month ago.]

1,078 Posts

mmcgee Reply #4, 10 years, 1 month ago

Couple of notes.

1. In the Wayfinder call for &level, I have `3`
This is because my site is currently in development and I have the index page (1) holding the home page for the old/current website while I development on the backend. This way I have essentially have a fully functioning menu for all pages in the "new" site, including a link to what is going to be the new home/index page. Once live, I will change &level to `1`

2. I have not tested my code for ul ul ul super deep drop navigation. I'm a fan of keeping it simple, saving more specific menus for the sections of a site where they are needed. Just my preference.

3. Not sure if you are familiar with Foundation. Don't be like me. If at all possible, create a separate style sheet and insert the rules you want to change if you're planning to give the menu a custom look. I unfortunately made my edits directly in the foundation 5 css. Why? Well...because it's easier. I did put comments by each of my changes, but should I want to update or change some custom settings, it might get tedious. Oh well. Live and learn. If any of your duplicate / modified styles don't seem to be working... try adding !important.

4. The triangle that alerts users that the item has dropdown is down with a border setting. I hunted forever looking for a background gif image. Sheesh!

5. The overall background color gets a bit tricky to change. Remember there are two sets of CSS for most anything in foundation. Desktop and Mobile — designated by the @media queries. One can spend hours making changes and trying to figure out why they are not displaying on screen. But also, that background color is driven by several different rules. Just keep looking. You'll get background of just the buttons to change but then not the overall surrounding backgound. Common question on the Foundation 5 Forum.

6. Big difference in Foundation 5 is ems. If you've used F3 this layout may look small. The width of the site is completely driven by the default font site preference set on the user end. The default of 62.5 em equates to 1000px wide when the default browser font size is 16px. If you absolutely have to change the width, you don't need to re download a new foundation css. You can modify the width settings – there are about 3 locations. Change 62.5em to 75em and you'll get a site that equates to 1200 px wide.

7. Foundation 5 has super huge h tags. Too huge in my opinion. This site help immensely with understanding modular scale and making changes to the size of my h tags so that they still remain in harmony with each other. http://modularscale.com

180 Posts

troubadour Reply #5, 10 years, 1 month ago

whaou thank you very much mmcgee !!

it's working great with just main_nav_innerTpl and main_nav_outerTpl chunks, ie for a menu with 2 levels !

i will check your other chunks later.

yeah i've been working with foundation for a while, we talked together about it in another post.
i used F3 for about 10 websites, and just moved to F5 for the last 2 websites, which are still on production. thanks for the tips about sizes.

have a nice week-end !

1,078 Posts

mmcgee Reply #6, 10 years, 1 month ago

Those other chunks may have just been remnants from previous builds and testing. Wayfinder is awesome, but it's kind of a maze. And since it's the kind of thing that you install, get it working, and never look at it again, I find I have to come back up to speed again each time I am working with it again.

F3 to F5 was a huge leap for me. Much different, but very cool. The Hide / Show, and now the small medium large classes were confusing as all get out. I'm getting the hang of it though.

Here's a link about the site width: http://foundation.zurb.com/forum/posts/2558-what-happened-to-1200px-width

Here is my favorite Wing-Hou Chan post on the forum. If you ever need a bottom div with color to not be a stripe on shorter pages, and just fill up the rest of the screen... this is just the ticket!
And actually—I think it can be applied to any div, though the bottom is the one that usually needs to expand. The pro of this method is that you don't have to account for or calculate the height of anything else on the page. The script takes care of that, making this simple to apply across the board.
I think the coolest tip to date is Wing Hou's little trick for getting that bottom div to expand 100% to the bottom of the page.http://foundation.zurb.com/forum/posts/2896-row-height
There's some experimentation and suggestions at the beginning. His codepen is at: http://codepen.io/winghouchan/pen/jJuhq

180 Posts

troubadour Reply #7, 10 years, 1 month ago

thanks for your tips !
if you have problems with equalizer, i did lots of research about it

i discovered your man, Wing-Hou... he's crazy

http://codepen.io/winghouchan/pen/jnrDx/

1,078 Posts

mmcgee Reply #8, 10 years, 1 month ago

I'll keep that in mind. Haven't tried to implement the equalizer yet, but may on a next project. Thanks for the offer.

I'm glad that Wing-Hou is involved with the forum.

180 Posts

troubadour Reply #9, 10 years, 1 month ago

I agree with you on using a different css document to implement custom stlyes

how did you proceed to seperate, if you finally did it ?

for menu, i always did customisation in foundation.css... i know, bad but easier

1,078 Posts

mmcgee Reply #10, 10 years, 1 month ago

At this point, I have only done a few for other items in a separate sheet and they do seem to be working. I just make sure that the link to my CSS doc in the head is entered below the foundation css doc.

When I enter the classes and rules in my css, I only enter the rule that I am modifying, I don't repeat the entire set.

With this foundation menu there are the rules that apply to mobile as well as large screen, and in MODx it can get sort of frustrating toggling back and forth and trying to determine whether the menu is reacting to foundation css or my css. I think sometimes that's where adding !important might help. I see the !important suggestion a lot in some of the F5 forum answers.

What got me on to this was from this posting http://webdesign.tutsplus.com/articles/how-to-customize-the-foundation-4-top-bar--webdesign-14675.

What I have done in my current document is just put comments next to each change I made and and prefaced each with my own unique codename to make it easier for me to go to a search and easily find the changes that I made in case I ever have to go back in an work on it again. (i.e /*888 myChg was color: #ffffff;*****/
That way I can search for "myChg was" and click down through the list to reference the changes I made.

Not sure how much having a separate css file that overwrites the foundation css file will affect load speed. In general, there's so much under the hood that was another millisecond or two.

I think if it seems to tedious with setting up separate style adjustments for the menu, I just do the comment thing. Any other items though, that are simpler, that get changed, are easily popped into your CSS file. In terms of web fonts and h1 sizes though, I put those right into the foundation document.