Geek Answers Handbook

Reorder columns in Zurb Foundation

My problem is that although on the desktop I like to have a menu first and then a logo in the far right corner. Currently, when I compress the template to the mobile version, the logo is under the menu, which is not satisfactory. I would like to have this in front of the menu. I tried using push / pull without success.

Is it possible to have a logo on top of the template in mobile browsing mode?

Here is my code ...

<div class="container" style="margin-top: 15px;"> <div class="row"> <div class="ten columns mobile-four"> <nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> </div> <div class="two columns mobile-four"> <a href="index.php"><img src="images/logo.png" alt="logo"/></a> </div> </div> </div>
+7
source share
1 answer

So, at first you can end the mobile-four class, it does nothing (unless its custom for you). Looking at the documentation, there is mobile-[one two three] , four will be equivalent to leaving it.

To fix the problem, simply apply the source ordering class, for example:

 <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><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> </div> </div> </div>

Press and pull to order the menu first, and then the logo. Push and pull are ignored on mobile devices, that is, your logo will be added over the menu on the mobile phone.

Desktop: [Menu] [Logo]

Mobile [Logo] [Menu]

Docs: http://foundation.zurb.com/docs/grid.php

+11
source

More articles:


All Articles