I have a responsive menu in responsive 5 (5.4.7). The mobile menu (hamburger icon) shows for below 640 px, between 640 and 1185px the mobile menu disappears but the normal menu doesn't display properly. How do I change the breaking point of the mobile menu from 640 to 1185 (or some other designation).
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1 data-finder-type="Web App" data-finder-name="Logo" data-finder-id="7616221"><img src="{{ companyInfo['Logo']}}" alt="logo"></h1>
</li>
<li class="toggle-topbar menu-icon"><span></span>
</li>
</ul>
<section class="top-bar-section">
<ul>
{module_menu, version="2", menuId="1405853", moduleTemplateGroup="Default"}
</ul>
</section>
</nav>
Go to your _settings.scss file and around line 1425 you'll see the variable (which may be commented out by default):
$topbar-media-query: $medium-up;
Remove the '//' so it's no longer commented out, then change the '$medium-up' to either '$large-up' or more precisely 1185px. So it would look something like this:
$topbar-media-query: $large-up;
OR
$topbar-media-query: 1185px;
Setting the variable to '$large-up' makes the mobile hamburger menu display from the medium viewport size on down.
I know you didn't ask for this, but if you want the mobile hamburger menu to always show you can do the following:
$topbar-media-query: 9999px;
Related
I am using Foundation 6.7.4.
I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html
I have my accordion set up as such:
<div class="grid-x">
<div class="medium-12 cell">
<ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
My Title
</a>
<div class="accordion-content" data-tab-content>
My content
</div>
</li>
</ul>
</div>
</div>
When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.
But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.
Would anyone know why?
Turned out this was because I had 2 foundation.js files referenced.
System Info:
Windows 7 x64
aurelia-framework: "^1.0.0-beta.1.1.3"
"foundation-sites": "^6.2.1"
skeleton-navigation-webpack
How do I get the css code emitted when using aurelia and foundation together to be the same as when using foundation alone in a standard web page? This is causing the dropdown to work incorrectly.
I am using the skeleton-navigation-webpack and just substituting foundation html and css for nav-bar and a empty welcome page
Aurelia Code
main.js to initialize foundation framwork
aurelia.start().then(a => a.setRoot('app', document.body))
.then(a => {
// Initialize any frameworks you want to use
$(document).foundation();
console.log('foundation loaded')
});
The initialization of foundation $(document).foundation(); seems to work as the dropdown menu is displayed and working but the css is slightly different
nav-bar.html snippet before code is emitted
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li repeat.for="row of router.navigation">
<a href.bind="row.href">${row.title}</a>
</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
Importing the foundation css in Aurelian and link in standard html page. The only difference is in the html page in using the repeat.for for <li> via Aurelia
emitted code in Aurelia
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
<!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
<a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
</li><!--</view>--><!--<view>-->
Standard html page
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
One
<ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0">One</li>
One specific is the open-left class in the first <li>
<li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
Verse the is-down arrow is active
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
'reflow' is not Foundation 6, I instead use
attached(){
// refresh JS after DOM is loaded
$(document).foundation();
}
I can't test if this works better helping you out on the different CSS, but I do know this is the new reflow.
Answer found here: Foundation 6 & Reflow. I tested the reflow functionality, it works.
Aurelia as a "Single Page Application" framework loads page content dynamically all the time. I don't have tested it, but I think you have to re-apply foundation after ajax content is loaded.
You can do it calling foundation 'reflow' in the attached view-model method:
attached() {
$(document).foundation();
}
I'm new to Foundation and I'm trying to mix several components of Foundation into one nav bar just by using their classes and data attributes they've provided and demoed in their html.
I followed instructions for Responsive Toggle Dropdown at: http://foundation.zurb.com/sites/docs/responsive-navigation.html
And I want to make that Sticky. See: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation , 'Creating a sticky Nav Menu with Title Bar, DropdownMenu, and Sticky!'
They left out the toggle part so I don't know if this is even feasible by using just the classes and data attributes they provide for the html.
I can get them both to work separately but not together. It seems buggy but it could be me. I'd love to hear from anyone out there who might have succeeded in doing this!
This is what I have so far. The wider window is sticky and responsive. The dropdown initially falls behind the jumbotron until you scroll up a bit.
The narrow window's responsive toggle works but the sticky does not. And initially the dropdown falls beneath the jumbotron until you widen the window a bit. The drilldown works fine.
This is the code:
<div class="row">
<div data-sticky-container>
<div class="top-bar" data-responsive-toggle="main-menu" data-hide-for="medium" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1">
<button class="menu-icon" type="button" data-toggle></button>
<div class="top-bar-title">Fruit Is Good</div>
</div>
</div>
<div data-sticky-container>
<nav class="top-bar" id="main-menu" data-sticky data-options="marginTop:0;" style="width:100%" >
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
<li class="menu-text">Fruit Is Good</li>
<li class="active">Home</li>
<li>Apples</li>
<li>Citrus
<ul class="vertical menu">
<li>Oranges</li>
<li>Limes</li>
<li>Lemons</li>
</ul>
</li>
<li>Bananas</li>
<li>Gallery</li>
</ul>
</div>
</nav>
</div>
</div>
And you can find the demo here: http://lucillekenney-demos.com/fruit/home.html
I'm using foundation as a basis for the site design and developing a nav bar for the side of the screen. I want to use Foundation's side nav because it has dividers and nice method for graying out or marking nav links as 'active'. The problem I'm having is that the clickable area for the link extends the width of the container instead of the text content of the link. I feel that is confusing and I don't want that experience for my users.
Zurb Foundation Code:
<section class="section">
<ul class="side-nav no_padding_top">
<h5 >What can I do here?</h5>
<li class="">
<a href="#" >View Popular</a>
</li>
<li class="">
<a href="#" >View Top Rated</a>
</li>
<li class="">
<a href="#" >Browse Categories</a>
</li>
</ul>
</section>
In the picture below I show the way the zurb site nav is rendered (bottom) with a border around the clickable area. I want to limit the click area around the link text (top), ie. the clickable link is the size of the text, not the container. How can I override the default zurb foundation behavior to do that?
It is because the link is set to display:block. Override it with:
.side-nav li a {
display: inline-block;
}
How to make a vertical tabs like we have in zurb foundation doc website : http://foundation.zurb.com/docs/javascripts.php where we have tabs and sub menu when clicking on item for example "javascript".
Here is the code from their page
it's just unordered list inside one of list elements from main navigation
<ul class="tabs vertical hide-on-phones">
<li>Getting Started</li>
<li>Compass</li>
<li>Rails</li>
<li>Sass</li>
<li>CSS Quickstart</li>
<li class="active">Components
<ul>
<li>Overview</li>
<li>The Grid</li>
<li>Media Queries</li>
<li>Typography</li>
<li>Buttons</li>
<li>Forms</li>
<li class="active">Navigation</li>
<li>Tabs</li>
<li>Elements</li>
</ul>
</li>
<li>Javascripts</li>
<li>Support</li>
</ul>