Menu icon Foundation

My Posts




My Comments

Ariel Frailich commented on Ariel Frailich's post about 2 years

I finally got it working. Since this is for a mobile app -- separate from what's displayed in the browser -- I created an additional top-nav menu as drilldown, and it works beautifully. Perhaps this freed it from some interfering CSS.
Thank you for pointing me in the right direction!
Ariel

Ariel Frailich commented on Ariel Frailich's post about 2 years

 Ahhh, the commit in which it was introduced hints at the answer. It looks like it was referring to the get_template_part line immediately following it, which presumably had been commented out in the past. At some later point, the approach changed, as evidenced by the two 'off-canvas...' divs in the current version.
Thank you for helping to clear this up!

Ariel Frailich commented on Ariel Frailich's post about 2 years

But there is nothing to uncomment, except the comment line itself. Hence my question: what could the author have meant to comment out, but didn't? I don't see anything that makes sense to leave out. The </header> line is the end of the file.

Ariel Frailich commented on Ariel Frailich's post about 2 years

 Hi Val,
Ohhhh, thank you! That works wonderfully!
(From your reply, I also learned that the 'Plugin Options' at the bottom of the doc pages can be used as attributes. I only gave those sections a glance, thinking they were JS vars. Thank you!)
There's one small problem left. I noticed that the dropdown handler is smart enough to open the pane to the left (when position was 'right') when there isn't enough window space on the right. Now that I've adjusted the panes to open halfway down the trigger and centred, the panes at each end of the row open too high: the left one mostly above the trigger, the right one aligned with the top of the trigger. You can see this by hovering over the small poster images on <http://streamiacs.atthezown.com>.
Might there be a way to fix this? If not, I'll live with it.
Thank you!

Ariel Frailich commented on Ariel Frailich's post over 2 years

Hi Ryan,
Sorry for the long delay. When I posted my last message, the thread was marked as spam and blocked. Meanwhile, I had to ready the site to be presented to various groups, which kept me extremely busy.
So -- the menu. I did change it to drilldown as you suggested, but it still had problems. Unfortunately, I don't remember exactly what those were, and to get the site ready for the client's needs (and last-minute changes), I had to make a few hacks to the menu system. It's perfect on large screens -- and a mess on small ones. Fixing it will have to wait until I can put the site back in dev mode.
All I can do at this point is thank you, once again, for your help. All the best!
Ariel

Ariel Frailich commented on Ariel Frailich's post over 2 years

Hi Ryan,
I'm stumped. I cleared History and Website Data, then removed All Website Data in Advanced, and the submenu still displays horizontally. iPhone 5, iOS 10.3.1. Is my phone in the Twilight Zone?!? Sigh... :(
I had tried all four nav styles; title-bar is the only that displays a closed menu, the others show an open menu at the top of the page (and no hamburger to close it).
I'll try the changes a bit later. Thank you!!
Ariel

Ariel Frailich commented on Ariel Frailich's post over 2 years

Oh I forgot a few things:
URL: http://streamiacs.atthezown.com
'display: block' didn't change anything.
No errors in console.
Thank you!

Ariel Frailich commented on Ariel Frailich's post over 2 years

Hello again, Ryan,
It's bizarre. I removed all custom styles and disabled all the plugins that I thought could affect the display, but nothing changed.
I had a look at the source in the Inspector and found that 'vertical' was missing!
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2411 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Genres" aria-controls="9kyyw1-acc-menu" aria-expanded="true" id="71wgk5-acc-menu-link"><a href="#" data-slimstat="5">Genres</a>
<ul class="menu submenu is-accordion-submenu is-active" data-submenu="" role="menu" aria-labelledby="71wgk5-acc-menu-link" aria-hidden="false" id="9kyyw1-acc-menu" style="display: block;">
<li class="menu-item-92 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Action" aria-controls="igzuu7-acc-menu" aria-expanded="false" id="yi7wjr-acc-menu-link"><a href="http://streamiacs.atthezown.com/genre/action/" data-slimstat="5">Action</a>
<ul class="menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="yi7wjr-acc-menu-link" aria-hidden="true" id="igzuu7-acc-menu" style="display: none;">
<li class="menu-item-327 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/war/" data-slimstat="5">War</a></li>
</ul>
</li>
<li class="menu-item-183 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Adventure" aria-controls="7s8llt-acc-menu" aria-expanded="false" id="qupifv-acc-menu-link"><a href="http://streamiacs.atthezown.com/genre/adventure/" data-slimstat="5">Adventure</a>
<ul class="menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="qupifv-acc-menu-link" aria-hidden="true" id="7s8llt-acc-menu" style="display: none;">
<li class="menu-item-396 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/jungle/" data-slimstat="5">Jungle</a></li>
</ul>
</li>

Still in Inspector, I added 'vertical' to the <ul> on the second line above. Bingo -- it works!
Now to make it permanent... is there a less ugly solution than a snippet of JS?
I also noticed that the submenu items are aligned with the parent. Shouldn't they be indented?
Thank you again for your help -- it's much, much appreciated!
Ariel

Ariel Frailich commented on Ariel Frailich's post over 2 years

Hi Ryan,
Thank you for your reply!
I failed to mention (corrected now) that I'm using JointsWP, a Wordpress theme that incorporates Foundation. The menu items are generated by Wordpress, which limits the amount of control I have.
The submenu items do have 'vertical menu' classes, but something else must be overriding that. Here are the first few menu items:
<div class="off-canvas position-right is-transition-push" id="off-canvas" data-off-canvas="rwghuq-off-canvas" aria-hidden="true">
<ul id="menu-streamiacs" class="vertical menu" data-accordion-menu="ejx3sm-accordion-menu" role="menu" aria-multiselectable="true"><li id="menu-item-2539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2539 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Films" aria-controls="l6mja0-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/film/" data-slimstat="5">Films</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-2539" aria-hidden="true" id="l6mja0-acc-menu" style="display: none;">
<li id="menu-item-2538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2538 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/my-lists/" data-slimstat="5">My Lists</a></li>
</ul>
</li>
<li id="menu-item-2411" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2411 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Genres" aria-controls="ynetoj-acc-menu" aria-expanded="false"><a href="#" data-slimstat="5">Genres</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-2411" aria-hidden="true" id="ynetoj-acc-menu" style="display: none;">
<li id="menu-item-92" class="menu-item-92 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Action" aria-controls="r9d0om-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/genre/action/" data-slimstat="5">Action</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-92" aria-hidden="true" id="r9d0om-acc-menu" style="display: none;">
<li id="menu-item-327" class="menu-item-327 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/war/" data-slimstat="5">War</a></li>
</ul>
</li>
<li id="menu-item-183" class="menu-item-183 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Adventure" aria-controls="g23p1a-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/genre/adventure/" data-slimstat="5">Adventure</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-183" aria-hidden="true" id="g23p1a-acc-menu" style="display: none;">
<li id="menu-item-396" class="menu-item-396 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/jungle/" data-slimstat="5">Jungle</a></li>
</ul>
</li>

Time to do some digging. Again, thank you very much for your help!
Ariel
 

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Ariel Frailich's post about 2 years

I finally got it working. Since this is for a mobile app -- separate from what's displayed in the browser -- I created an additional top-nav menu as drilldown, and it works beautifully. Perhaps this freed it from some interfering CSS.
Thank you for pointing me in the right direction!
Ariel

You commented on Ariel Frailich's post about 2 years

 Ahhh, the commit in which it was introduced hints at the answer. It looks like it was referring to the get_template_part line immediately following it, which presumably had been commented out in the past. At some later point, the approach changed, as evidenced by the two 'off-canvas...' divs in the current version.
Thank you for helping to clear this up!

You commented on Ariel Frailich's post about 2 years

But there is nothing to uncomment, except the comment line itself. Hence my question: what could the author have meant to comment out, but didn't? I don't see anything that makes sense to leave out. The </header> line is the end of the file.

You commented on Ariel Frailich's post about 2 years

 Hi Val,
Ohhhh, thank you! That works wonderfully!
(From your reply, I also learned that the 'Plugin Options' at the bottom of the doc pages can be used as attributes. I only gave those sections a glance, thinking they were JS vars. Thank you!)
There's one small problem left. I noticed that the dropdown handler is smart enough to open the pane to the left (when position was 'right') when there isn't enough window space on the right. Now that I've adjusted the panes to open halfway down the trigger and centred, the panes at each end of the row open too high: the left one mostly above the trigger, the right one aligned with the top of the trigger. You can see this by hovering over the small poster images on <http://streamiacs.atthezown.com>.
Might there be a way to fix this? If not, I'll live with it.
Thank you!

You commented on Ariel Frailich's post over 2 years

Hi Ryan,
Sorry for the long delay. When I posted my last message, the thread was marked as spam and blocked. Meanwhile, I had to ready the site to be presented to various groups, which kept me extremely busy.
So -- the menu. I did change it to drilldown as you suggested, but it still had problems. Unfortunately, I don't remember exactly what those were, and to get the site ready for the client's needs (and last-minute changes), I had to make a few hacks to the menu system. It's perfect on large screens -- and a mess on small ones. Fixing it will have to wait until I can put the site back in dev mode.
All I can do at this point is thank you, once again, for your help. All the best!
Ariel

You commented on Ariel Frailich's post over 2 years

Hi Ryan,
I'm stumped. I cleared History and Website Data, then removed All Website Data in Advanced, and the submenu still displays horizontally. iPhone 5, iOS 10.3.1. Is my phone in the Twilight Zone?!? Sigh... :(
I had tried all four nav styles; title-bar is the only that displays a closed menu, the others show an open menu at the top of the page (and no hamburger to close it).
I'll try the changes a bit later. Thank you!!
Ariel

You commented on Ariel Frailich's post over 2 years

Oh I forgot a few things:
URL: http://streamiacs.atthezown.com
'display: block' didn't change anything.
No errors in console.
Thank you!

You commented on Ariel Frailich's post over 2 years

Hello again, Ryan,
It's bizarre. I removed all custom styles and disabled all the plugins that I thought could affect the display, but nothing changed.
I had a look at the source in the Inspector and found that 'vertical' was missing!
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2411 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Genres" aria-controls="9kyyw1-acc-menu" aria-expanded="true" id="71wgk5-acc-menu-link"><a href="#" data-slimstat="5">Genres</a>
<ul class="menu submenu is-accordion-submenu is-active" data-submenu="" role="menu" aria-labelledby="71wgk5-acc-menu-link" aria-hidden="false" id="9kyyw1-acc-menu" style="display: block;">
<li class="menu-item-92 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Action" aria-controls="igzuu7-acc-menu" aria-expanded="false" id="yi7wjr-acc-menu-link"><a href="http://streamiacs.atthezown.com/genre/action/" data-slimstat="5">Action</a>
<ul class="menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="yi7wjr-acc-menu-link" aria-hidden="true" id="igzuu7-acc-menu" style="display: none;">
<li class="menu-item-327 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/war/" data-slimstat="5">War</a></li>
</ul>
</li>
<li class="menu-item-183 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Adventure" aria-controls="7s8llt-acc-menu" aria-expanded="false" id="qupifv-acc-menu-link"><a href="http://streamiacs.atthezown.com/genre/adventure/" data-slimstat="5">Adventure</a>
<ul class="menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="qupifv-acc-menu-link" aria-hidden="true" id="7s8llt-acc-menu" style="display: none;">
<li class="menu-item-396 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/jungle/" data-slimstat="5">Jungle</a></li>
</ul>
</li>

Still in Inspector, I added 'vertical' to the <ul> on the second line above. Bingo -- it works!
Now to make it permanent... is there a less ugly solution than a snippet of JS?
I also noticed that the submenu items are aligned with the parent. Shouldn't they be indented?
Thank you again for your help -- it's much, much appreciated!
Ariel

You commented on Ariel Frailich's post over 2 years

Hi Ryan,
Thank you for your reply!
I failed to mention (corrected now) that I'm using JointsWP, a Wordpress theme that incorporates Foundation. The menu items are generated by Wordpress, which limits the amount of control I have.
The submenu items do have 'vertical menu' classes, but something else must be overriding that. Here are the first few menu items:
<div class="off-canvas position-right is-transition-push" id="off-canvas" data-off-canvas="rwghuq-off-canvas" aria-hidden="true">
<ul id="menu-streamiacs" class="vertical menu" data-accordion-menu="ejx3sm-accordion-menu" role="menu" aria-multiselectable="true"><li id="menu-item-2539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2539 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Films" aria-controls="l6mja0-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/film/" data-slimstat="5">Films</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-2539" aria-hidden="true" id="l6mja0-acc-menu" style="display: none;">
<li id="menu-item-2538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2538 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/my-lists/" data-slimstat="5">My Lists</a></li>
</ul>
</li>
<li id="menu-item-2411" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2411 is-accordion-submenu-parent" role="menuitem" aria-haspopup="true" aria-label="Genres" aria-controls="ynetoj-acc-menu" aria-expanded="false"><a href="#" data-slimstat="5">Genres</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-2411" aria-hidden="true" id="ynetoj-acc-menu" style="display: none;">
<li id="menu-item-92" class="menu-item-92 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Action" aria-controls="r9d0om-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/genre/action/" data-slimstat="5">Action</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-92" aria-hidden="true" id="r9d0om-acc-menu" style="display: none;">
<li id="menu-item-327" class="menu-item-327 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/war/" data-slimstat="5">War</a></li>
</ul>
</li>
<li id="menu-item-183" class="menu-item-183 is-accordion-submenu-parent is-submenu-item is-accordion-submenu-item" role="menuitem" aria-haspopup="true" aria-label="Adventure" aria-controls="g23p1a-acc-menu" aria-expanded="false"><a href="http://streamiacs.atthezown.com/genre/adventure/" data-slimstat="5">Adventure</a>
<ul class="vertical menu submenu is-accordion-submenu" data-submenu="" role="menu" aria-labelledby="menu-item-183" aria-hidden="true" id="g23p1a-acc-menu" style="display: none;">
<li id="menu-item-396" class="menu-item-396 is-submenu-item is-accordion-submenu-item" role="menuitem"><a href="http://streamiacs.atthezown.com/genre/jungle/" data-slimstat="5">Jungle</a></li>
</ul>
</li>

Time to do some digging. Again, thank you very much for your help!
Ariel
 

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content