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

CSS

Posted by Jelique Edward
Jelique Edward
1,691 Points

Why is the Burger Moving ?!

So I'm designing a dropdown menu for my project with the Burger Menu icon as the 'button' that drops the menu (pun intended).

Everything was going along all fine and smooth until the burger started to move everytime I hovered over it. Yet it would go back to it's inital position as soon as the mouse came off of it. Can help anybody tell me why ?

Here's a link to the code: http://codepen.io/ViaJCE/pen/QwmxzB

2 Answers

Greg Kaleka
Greg Kaleka
39,021 Points

I'm not sure exactly what's going on, but you do have two id's named "menu". That's a problem. If you remove, or rename the svg's id, the problem is fixed.

You can only use an id once in your html. Classes you can use multiple times.

Jelique Edward
Jelique Edward
1,691 Points

0_0 Greg, thank you so much for your help and keen eye. I had not noticed this at all. It's always a small issue like this that sets everything off.

Again, Thank you a lot.

Greg Kaleka
Greg Kaleka
39,021 Points

No problem!

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi,

The following style looks to be resizing the button to 310px wide on hover:

div #menu:hover {
    width: 310px;
    height: auto;
}

Is this what you meant?

-Rich

Jelique Edward
Jelique Edward
1,691 Points

Well the reason that I have the #menu resize to 310px is so that it expands to show the ul that's nested within it. It's part of a fix I devised so that the nested ul and doesnt become visible and can't be accessed unless the #menu is hovered over first. (I hope you understand what I mean)