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

JavaScript

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

Responsive 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
Dom Talbot
7,686 Points
Dom Talbot
Dom Talbot
7,686 Points

Hi 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
James Barrett
13,253 Points
James Barrett
James Barrett
13,253 Points

Hi 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.