Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aj Villalobos
1,864 PointsHow would you make a nav like these in foundation.
I want this layout to be also applicable to mobile layout, in the first screenshot, that is on medium - large screen. On the second screenshot that is the mobile version or the small, I want to be able to put the "Post status" button also.
https://www.dropbox.com/s/oszudpri4emqwnb/Screenshot%202014-08-09%2017.54.47.png https://www.dropbox.com/s/u6znd2ci7lkhihr/Screenshot%202014-08-09%2017.51.58.png
Is there anyone using foundation? I know treehouse is :)
Aj Villalobos
1,864 PointsUpdated now mate! Sorry :)
1 Answer
thomascawthorn
22,986 PointsI had to do this - probably - the long way. If you head into the docs and just checkout the page source of their site, you can see the navigation is repeated twice - once for the top bar, and a again for the mobile slide out menu.
I had to remove the javascript that affected the top bar (I did this by removing all the javascript in general). I then did loads of inspect element to find out what was hiding the top bar.
It took me ages to figure it out, but essentially the elements in the top bar are pushed down below the navigation, I think behind the body, essentially hiding them.
I had to go to around line 4000 and change .top-bar-section ul { by commenting out width: 100%. It's probably better practice to overwrite all this with a 'custom.css' file. But what can I say. I love danger.
You'll also need to check for hide-for-small classes on any parent containers.
The final step - removing the top margin on the ul - this could potentially be on the same .top-bar-section ul { declaration, but I can't remember!
You should see the navigation start to creep back onto the page, it will need some final adjustments!
Hope that gets you started
Tom
Aj Villalobos
1,864 PointsThat's really a long way mate. hehehe, I'll try to find other ways, I don't really want to mess with the base code, maybe just overwrite it if possible, thank you for your inputs!
thomascawthorn
22,986 PointsThere's some actual work to do even when using a framework! :-p A quicker way would be to remove all the classes, see what breaks, and fix with a custom css sheet. This way you could probably find which class/id the javascript might be attaching itself onto. If you find a nice little fix, post it!
Aj Villalobos
1,864 PointsI know that mate, been using bootstrap for a year but haven't really used this usecase, hehehe, but yeah, eventually I may go down that road. hehe.
thomascawthorn
22,986 Pointsthomascawthorn
22,986 PointsI think you need to update your screen shot links :-)