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
Related
I just wanna know the correct class to use for divs..currently my index page content divs look as below:
This is okay for dekstop view, I used class="large-4 columns" for the above. But I want something like below for tablet and mobile view.
How do I achieve this plz?
I TRIED but din't work as i wanted.
<div class="large-4 columns">
<div class="medium-2 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-10 columns">
<h1>LAUNCH OF THE XXXX</h1>
XXXXX, a pioneering voluntary industry-wide initiative that is dedicated to the development and advocacy of professional standards, including ethical standards, was launched on 24 September 2014. The event was officiated by both the Governor of Bank Negara Malaysia and Chairman of the Securities Commission Malaysia and was attended by leaders of the financial services industry.
</div>
</div>
If your settings has 12 total columns it should be like this:
<div class="row">
<div class="medium-12 large-4 columns">
<!--inaugural-->
</div>
<div class="medium-12 large-4 columns">
<!--launch-->
</div>
<div class="medium-12 large-4 columns">
<!--insights-->
</div>
</div>
I think your first tag is not at good place
<div class="row">
<div class="large-12 columns">LARGE VIEW</div>
<div class="medium-4 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-8 columns">
<h1>LAUNCH OF THE XXXX</h1>
...
</div>
</div>
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>
In my application.hbs file I have an application wide nav bar.
<div class="row nav">
<div class="large-12 colummns">
<ul class="inline-list top-nav">
<li><h6>{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}</h6></li>
<li><h6>//</h6></li>
<li><h6>CONDITIONS</h6></li>
<li><h6>//</h6></li>
<li><h6>PROGRAMS</h6><li>
<li><h6>//</h6></li>
<li><h6>TESTIMONIALS</h6></li>
</ul>
</div>
</div>
<div class="row subnav">
<div class="large-12 colummns">
{{#if renderAboutSubNav}}
{{render 'about/subnav'}}
{{/if}}
</div>
</div>
{{outlet}}
subnav.hbs:
<ul class="inline-list subnav-list">
<li class="subnav-item">{{#linkTo "about.philosophy"}}philosophy{{/linkTo}}</li>
<li class="subnav-item">//</li>
<li class="subnav-item">{{#linkTo "about.leadership"}}leadership{{/linkTo}}</li>
<li class="subnav-item">//</li>
<li class="subnav-item">staff</li>
</ul>
The ABOUT link, when clicked, displays a subnav -- displayed whenever the url contains 'about'. In that subnav are about subpages -- philosophy, leadership, staff. Philosophy is actually the index page of the about section, which is why I am linking ABOUT to about.philosophy:
{{#linkTo "about.philosophy"}}ABOUT{{/linkTo}}
When I click ABOUT, the ember app renders /about/philosophy as it is supposed to, and the ABOUT link and philosophy link in the subnav are set to active.
However, when I click 'Leadership' the leadership link on the subnav is active but not the ABOUT link in the main nav, even though the url reads /about/leadership.
I don't understand why it is doing this.
My router looks like this:
Ew.Router.reopen(location: 'history')
Ew.Router.map ->
#.resource "about", ->
#.route "philosophy"
#.route "leadership"
#.resource "staff"
#.route "conditions"
#.route "programs"
#.route "testimonials"
about.hbs:
<div class="row about-bg">
<div class="large-12 columns">
<div class="row">
<h1 class="about-phil">Eskridge & White</h1>
</div>
</div>
</div>
<div class="row philosophy-content">
<div class="large-9 columns about-us">
{{outlet}}
</div>
</div>
<div class="large-3 columns sidebar">
{{partial 'sidebar'}}
</div>
</div>
The problem here is you are linking to about.philosophy, so when you navigate to about.leadership active class won't be applied.
So make your link-to to point about route,
{{#link-to "about"}}ABOUT{{/link-to}}
And from your about.index route, redirect to about.philosophy route,
so that active class will be always applied to about's link-to whenever you are in the child of about route.
A bin for your case.
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.