Bummer! You must be logged in to access this page.

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

Posted by Jeremy Coleman
Jeremy Coleman
5,449 Points

Jquery toggle issue

I am working on a website, however I have a minor bug.

I am using Jquery to toggle a class to display the navigation for smaller devices. However if it's toggled and the window is re-sized the navigation disappears (desktop) until it's toggled again for mobile.

It's not vital that I fix it but would like to know how to troubleshoot the issue.

Hope that made sense, here is the website.

www.CyberbitDesigns.com

Tyler Haas
Tyler Haas
20,623 Points

can you post your code here so I can see what you are doing?

Jeremy Coleman
Jeremy Coleman
5,449 Points

Sure thing, I cut a lot of the code out since I figured it has nothing to do with my situation.

.navicon {
  display: none;
}
.toggle {
  width: 47px;
  margin: 0;
  padding: 0;
}
.main-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  background-color: $seccol;
  text-align: right;
  z-index: -1000;
}
/************************
  Media Queries Section
************************/
@media all and (max-width: 550px) {
  .navicon {
    display: block;
  }
  .navmenu {
    display: none;
    text-align: center;
    margin-left: 55px;
    border-top: none;
  }
}
/************************
  Script Section
************************/
.on {
  display: block;
}

$(function() {
    $('.toggle').on('click', function() {
        $( ".navmenu" ).slideToggle( "slow" );
        $('.navmenu').toggleClass('on');    
    });
});

It toggles just fine, but when it's toggled twice (So toggle once menu shows, toggle again menu is off) then when you re-size the browser window the navigation menu is gone.

1 Answer

Hugo Paz
Hugo Paz
15,622 Points

Hi Jeremy,

The issue lies with slideToggle. When it runs it adds inline styles to the element. So when you click to hide the menu, an inline style is added to the ul with the class of navmenu. When you resize the page, the toggle button disappears but the inline style remains. This is why you cannot see the menu anymore.

Replace this:

@media (min-width: 551px)
.navmenu {
  display: block;
}

with this:

@media (min-width: 551px)
.navmenu {
  display: block !important;
}

See if it helps

Jeremy Coleman
Jeremy Coleman
5,449 Points

works perfect. Thank you! Didn't realize slide would do that.