Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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

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.