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
Sally Gradle
24,694 PointsDisable Sticky Navigation in Mobile Size Viewport
I have created a blog site using Guil Hernandez's lessons on Jekyll and GitHub. I wanted to add a sticky nav bar and logo image (hero) like Dave McFarland showed in his JQuery lesson and I was successful in implementing sticky.js. However, I think the responsive nav bar for viewports smaller than 768px just takes up too much screen real estate, so I wanted to disable it in smaller viewports. The problem is, everything I have tried disables the sticky nav for larger viewports, too. Below is the latest thing I have tried. It is in my main.js file:
if($(window).outerWidth()> 768){
$('.main-header').sticky();
}
$('.hero').sticky({topSpacing:49});
I left the .hero class out of the function, as it is hidden in smaller viewports elsewhere in CSS.
Should I be trying to handle the sticky nav with CSS or JQuery?
Jacob Mishkin
23,118 PointsJacob Mishkin
23,118 PointsI would do a little trial and error on this one. JS's width method does not go well with media queries, I would start by removing the class at the viewport width, with your Jquery and see how that goes, and try just by using CSS media queries.