Menu icon Foundation

Engineer | Vancouver, BC

The title above is a little misleading. I think jack, or jane, of all trade is more accurate

My Posts





My Comments

Karima Premji commented on David Meyer's post over 1 year

Hello:
I'm using foundation 6.2.0 as it seems to do what I need for the navigation.
<ul id="main-menu" class="drilldown large-horizontal menu align-center" data-responsive-menu="drilldown large-dropdown" data-auto-height="true" data-animate-height="true">
I also like that by default the rows are centered unless you add expanded.  But the align-center added to nav ul does not work. is there a work around?  I've tried the below, (navigator is my mneu with the ul class from above,) but it does not center.
<div class="row column expanded colorbg">
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="main-menu">
</button>
<div class="title-bar-title">
Menu
</div>
</div>
<div class="row column">
{Navigator template='cornerstone-mainMenu'}
</div>
</div>

Karima Premji commented on Adam Sherman's post over 2 years

ANSWER FOUND: add to stylesheet
.is-drilldown { min-height: 0!important;}
Should have remembered the cascading part of stylesheet ;(
---------------
hello Rafi
I'm using F6.2.0 so that I can place a responsive dropdown with drilldown option.  I have this working beautifully.  However like others, i'm having an issue with the extra space the drilldown is taking on mobiles. I have added the attributes as listing in the above documentation, with no success.  I was looking in firebug and noticed that if I simply removed the inline style of min-height, it did the trick.
Since this is part of the js and probably used elsewhere in the code, I did not want to simply comment it out of the js.  How can i bypass this?

Karima Premji commented on Karima Premji's post over 2 years

I reverted back to F6.2.0 and finally got the menu working as drilldown for small and medium, dropdown for large.
I have a minor question regarding the drilldown on iphone 6S.  Panels 2+ are given an inline height.  but when you click back, that height remains and leaves a lot space before any content is seen.  how can i reduce this?  in the js?

Karima Premji commented on Heidi Lambeth's post over 2 years

did you include this css rules for small screen
.no-js .top-bar { display: none; }
and for @media only screen and (min-width: 40em) {    .no-js .top-bar { display: block; }    .no-js .title-bar { display: none; }
}
lastly, last line below the js calls should be
<script>    $(document).foundation();</script>

Posts Followed




  • 5
    Replies
  • Responsive Menu Question (F6)

    By Heidi Lambeth

    First of all, let me start by saying I am totally new to Foundation but am excited about the possibilities. I am trying to use the Responsive Top Bar Menu and have it display only on small screens. I have copied the code almost exactly, but for some rea... (continued)

    Last Reply by Karima Premji over 2 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on David Meyer's post over 1 year

Hello:
I'm using foundation 6.2.0 as it seems to do what I need for the navigation.
<ul id="main-menu" class="drilldown large-horizontal menu align-center" data-responsive-menu="drilldown large-dropdown" data-auto-height="true" data-animate-height="true">
I also like that by default the rows are centered unless you add expanded.  But the align-center added to nav ul does not work. is there a work around?  I've tried the below, (navigator is my mneu with the ul class from above,) but it does not center.
<div class="row column expanded colorbg">
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="main-menu">
</button>
<div class="title-bar-title">
Menu
</div>
</div>
<div class="row column">
{Navigator template='cornerstone-mainMenu'}
</div>
</div>

You commented on Adam Sherman's post over 2 years

ANSWER FOUND: add to stylesheet
.is-drilldown { min-height: 0!important;}
Should have remembered the cascading part of stylesheet ;(
---------------
hello Rafi
I'm using F6.2.0 so that I can place a responsive dropdown with drilldown option.  I have this working beautifully.  However like others, i'm having an issue with the extra space the drilldown is taking on mobiles. I have added the attributes as listing in the above documentation, with no success.  I was looking in firebug and noticed that if I simply removed the inline style of min-height, it did the trick.
Since this is part of the js and probably used elsewhere in the code, I did not want to simply comment it out of the js.  How can i bypass this?

You commented on Karima Premji's post over 2 years

I reverted back to F6.2.0 and finally got the menu working as drilldown for small and medium, dropdown for large.
I have a minor question regarding the drilldown on iphone 6S.  Panels 2+ are given an inline height.  but when you click back, that height remains and leaves a lot space before any content is seen.  how can i reduce this?  in the js?

You commented on Heidi Lambeth's post over 2 years

did you include this css rules for small screen
.no-js .top-bar { display: none; }
and for @media only screen and (min-width: 40em) {    .no-js .top-bar { display: block; }    .no-js .title-bar { display: none; }
}
lastly, last line below the js calls should be
<script>    $(document).foundation();</script>

Posts Followed

Following

  • No Content

Followers

  • No Content