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 trialJames Barrett
13,253 PointsResponsive Navigation Icon Help!
Hi there,
I am currently in the process of building a responsive navigation menu and I feel like I am almost there. The code is not the greatest, however I want to get this working :P Below is the code that I feel that is most relevant to my problem:
HTML:
<nav>
<div class="bars" onclick="toggleNav(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
<ul class="desktopNav">
<li><a href="#about">About</a></li>
<li><a href="#latest">Latest</a></li>
<li><a href="#favourites">Favourites</a></li>
<li><a href="#contact">Contacts</a></li>
</ul>
CSS:
.bars {
cursor: pointer;
}
@media screen and (max-width: 768px) {
.desktopNav {
display: none;
}
}
JavaScript:
function toggleNav(icon) {
icon.classList.toggle("change");
}
jQuery(document).ready(function() {
jQuery('.bars').click(function(e) {
jQuery('.desktopNav').toggle();
});
});
It works fairly well. If I were to click the button represented as '.bars', the navigation would toggle. However when the screen size is above 768px, the navigation disappears. What code would I implement to ensure that the when the .desktopNav class is toggled, it only affects it on screen sizes below 768px?
If you need me to provide further information then please let me know. :)
P.S. It is fairly late as I post this, so if this does not make sense at all, let me know about it xD
Thanks, James.
1 Answer
Dom Talbot
7,686 PointsHi James
If I've understood your question correctly, detecting the window width before triggering your toggle event should be what your after.
function toggleNav(icon) {
icon.classList.toggle("change");
}
jQuery(document).ready(function() {
jQuery('.bars').click(function(e) {
if (window.innerWidth <= 768) {
jQuery('.desktopNav').toggle();
}
});
});
James Barrett
13,253 PointsJames Barrett
13,253 PointsHi there,
I have attempted this solution however the problem still persists, if I resize the window to anything larger than 768px, the navigation will disappear. I need to make sure that after clicking the menu icon, it will only happen for that particular code block. The toggle() method will still affect the navigation on all screen sizes. I am not sure what to implement to achieve this?
Thanks, James.