I'm having some issues with sections in Foundation 5.
<div class="section-container horizontal-nav" data-section="horizontal-nav">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<ul class="side-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="divider"></li>
<li>Link 1</li>
</ul>
</div>
The above code only yields a vertical list, not the horizontal that the code is supposed to trigger. The code works in 4 but not in 5. I assume its a javascript change but the 5 documentation doesn't mention sections and the side-nav documentation mentions nothing about the section-container classes. Anybody get this to work in 5 yet?
You can achieve something similar using top-bar in a class="large-12 columns" (or whatever number of columns you want). All you have to do is take care of the menu styles if you want it to look different from the classic top-bar.
Here's a simple example, is not too fancy but hopefully it'll help to get started:
<header class="row">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation" data-options="is_hover:false">
<!-- All your menu code here -->
</nav>
</div>
</header>
http://jsfiddle.net/zdwo3aLc/embedded/result/
Related
Does anyone know how to make the drop down be the full width of the navigation in this example? I'm at my wits end on this one.
Codepen here
<!-- This demo uses float grid but you can use flex grid too -->
<div class="row">
<div class="columns">
<h3>Responsive Menu - Accordion Dropdown combo</h3>
<p>Same like drilldowns, an accordion menu works well on mobile, but on larger screens, you may want to convert that same menu into a dropdown. Here's an example for the same:</p>
</div>
</div>
<div class="row">
<div class="columns">
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
<li>
Item 1
<ul class="vertical menu">
<li>
Item 1A
<ul class="vertical menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
</ul>
</li>
<li>Item 1B</li>
</ul>
</li>
<li>
Item 2
<ul class="vertical menu">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
<li>
Item 3
<ul class="vertical menu">
<li>Item 3A</li>
<li>Item 3B</li>
</ul>
</li>
</ul>
</div>
</div>
I'm that there are some other approaches. However, I need this to also become an accordion on mobile, be responsive with a hamburger toggle, and use click rather than hover to trigger on desktop. So this solution is super close, and trying to make the dropdown be full width seemed (at least at face value) to be the simplest solution.
Similar to this post
A Top Bar with 2 navigation rows - Zurb Foundation 5
and this example
http://jsfiddle.net/Ty3ZT/6/
I would like to have a search form on the right side with a longer search box (the default is so small). As the screen size is smaller I'd like the second section containing the search form to wrap under the first section so that the top bar becomes twice in height.
Here is how I'd like it to end up:
This is as close as I've gotten it. (unsure why the search input is not the same height as the button, they are on my local install)
http://jsfiddle.net/Ty3ZT/18/
<div class="fixed">
<nav class="top-bar hide-for-small expand" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<!--first row-->
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-dropdown"><a class="">Account</a>
<ul class="dropdown">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>
</ul>
</section>
<!--second row-->
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div class="large-8 columns">
<input type="text" placeholder="Search here">
</div>
<div class="large-4 columns">
Search
</div>
</li>
</ul>
</section>
</nav>
</div>
How can I achieve this? Whenever I get the second section to wrap the search form is all messed up. button no longer inline.
I am using Foundation 4 with the Orbit slider.
I want to use it as a content-slider.
Is it possible to put the rows from foundation in the orbit slider without messing up the margins from Orbit?
<ul data-orbit>
<div class="row">
<div class="large-7 small-12 columns">
<h1>Hallo</h1>
</div>
</div>
<div class="row">
<div class="large-7 small-12 columns">
<h1>Doei</h1>
</div>
</div>
<img src="img/slider/1.jpg">
</ul>
There are 3 slider-items. 2 divs with row classes and 1 full-width image.
This example messes with the margins from the class row.
I want to add margins so the divs with row classes will align in the middle.
I'm not sure I understand your question well, but if you want 3 slides (2 with text on the middle of the large screen and 1 with the image) I think this code should work (however I didn't test it):
If you add the .large-centered classes to the <li> tags, they will align the texts to the middle automatically, and you don't have to care about the margins in css.
<div class="row">
<div class="large-12 columns">
<div class="orbit-container">
<ul data-orbit="">
<li class="row">
<div class="large-7 large-centered small-12 columns"><h1>Hallo</h1></div>
</li>
<li class="row">
<div class="large-7 large-centered small-12 columns"><h1>Doei</h1></div>
</li>
<li><img src="img/slider/1.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
I am testing foundation 3 framework and was wondering how i can set a row with five articles.
Does anyone have an idea to fix that?
One solution is to use columns of two and mark the last column as the end.
If your row doesn't have a count that adds up to 12 columns, you can
tag the last column with class="end" in order to override that
behaviour. [source]
<div class="row">
<div class="two columns">
article 1
</div>
<div class="two columns">
article 2
</div>
<div class="two columns">
article 3
</div>
<div class="two columns">
article 4
</div>
<div class="two columns end">
article 5
</div>
</div>
Alternatively if you need to use all the space you can use a block grid:
Block grids are made from a ul.block-grid with #-up styles chained to
it. You control how many you have in your Scss setting file or the
customizer. These are ideal for blocked-in content generated by an
application, as they do not require rows or even numbers of elements
to display correctly.
<ul class="block-grid five-up">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
<li>article 4</li>
<li>article 5</li>
</ul>
This should work in Foundation 5 (maybe 3 as well). The trick is to offset the first column and end the last.
<nav>
<div class="row">
<div class="column small-2 small-offset-1">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2 end">
<a>Link</a>
</div>
</div>
</nav>
Hope it helps someone, or a future me.
my problem is that while on a desktop I like having the menu first, and then the logo in the far right corner. Currently when I shrink the template to a mobile version, the logo goes under the menu which is not satisfactory. I would like to have it before the menu. I've tried using push/pull with no success.
Is it even possible to have the logo on top of the template when in mobile view?
Here is my code...
<div class="container" style="margin-top: 15px;">
<div class="row">
<div class="ten columns mobile-four">
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</div>
<div class="two columns mobile-four">
<img src="images/logo.png" alt="logo"/>
</div>
</div>
</div>
So first you can do away with the mobile-four class, it doesn't do anything (unless its custom to you). Looking at the documentation there is a mobile-[one two three], four would be the equivalent to leaving it off.
To fix the problem, simply apply a source ordering class, like so:
<div class="container" style="margin-top: 15px;">
<div class="row">
<div class="two columns push-ten">
<a href="index.php">
<img src="images/logo.png" alt="logo" /></a>
</div>
<div class="ten columns pull-two">
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</div>
</div>
</div>
Push and pull will correctly order the Menu first and Logo second. Push and pull are ignored on mobile, meaning your logo will stack above the menu on mobile.
Desktop:
[Menu][Logo]
Mobile
[Logo]
[Menu]
Docs:
http://foundation.zurb.com/docs/grid.php