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
Jonathan Grieve
Treehouse Moderator 91,252 PointsWebsite Critique and Question
Hi all,
This is a design I've been working on for a while. It's actually a few years in the making as my previous portfolio followed a more complex design.
http://www.jonniegrieve.co.uk/tmp/index.html
I like it, personally but I'd be interested to hear any critiques and suggestions people might have.
My main problem is this though. It uses a responsive design that kicks in on 680px width or less. There's a jQuery plugin involved that activates a hamburger menu.
The trouble is.. .to get this to work I had to commit a very bad sin. I made a copy of the navigation with a different class so I could style the navigation that wasn't used by the plugin. Now I have a functional website but the mobile nav flashes while the page is loading which is not good.
Any thoughts how I can fix this? I thought using multi classes might work but no joy. Thanks.
2 Answers
Sean T. Unwin
28,690 PointsGlad you know this is a sin. 
Style nav-collapse (and it's children) outside of the breakpoint as you would like. Check the source and styling in your browser's developer tools for the nav at the plugin's website to see how they did it.
Jonathan Grieve
Treehouse Moderator 91,252 PointsI was able to put in a fix when I gave up on the plugin idea.
And instead used this
$( document ).ready(function() {
$( ".hamburger" ).click(function() {
$( "#navLinks" ).slideToggle( "slow", function() {
// Animation complete.
});
});
});
I know I should probably use CSS transitions though. But jQuery is good enough to not let me down though right? What are your opinions? :)
Jonathan Grieve
Treehouse Moderator 91,252 PointsJonathan Grieve
Treehouse Moderator 91,252 PointsYes indeed I knew I shouldn't have done it, and I don't intend to go live with it ;)
I think what happens is the plugin styles a class that wraps around the navigation. if I try to switch off nav-collapse with display: none, it removes it completely from the CSS even when it's supposed to kick in with the breakpoint.
But based on your confidence I'll have another look.
The other point I'd make is that the plugin seems to work when the navigation is the very top most asset in the design but I want my logo above the navigation at all times. Thanks for your help. :)
Jonathan Grieve
Treehouse Moderator 91,252 PointsJonathan Grieve
Treehouse Moderator 91,252 PointsThe problem is once I attach the plugin to the class it sticks with the class no matter what breakpoint I'm on. So I try to use the menu wider than 680px I'm stuck with it. That includes the hamburger menu that is generated via jQuery. I don't want the hamburger menu above 680px but if I set it to display: none; the entire menu goes. Tricky.