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

Michael Gillihan
Michael Gillihan
11,774 Points
Posted by Michael Gillihan
Michael Gillihan
11,774 Points

Moving elements and putting them back.

I'm have a site structured with a nav menu in the site header and a secondary nav directly after the header.

I am trying to move the secondary nav within the header on smaller screens and have been able to do so, but I can't figure out how to get it back to the original structure if the window is resized from small to large.

View The Code

Any ideas are much appreciated!

2 Answers

Garrett Rodriguez
Garrett Rodriguez
17,588 Points
Garrett Rodriguez
Garrett Rodriguez
17,588 Points

I know this isn't the answer you are looking for but there a specific reason you are using JavaScript to do this? It would be fairly easy with CSS.

Michael Gillihan
Michael Gillihan
11,774 Points
Michael Gillihan
Michael Gillihan
11,774 Points

Thanks for answering!

Apart from hiding the nav under the header I don't know of a way to do this with CSS. I would definitely be interested in a CSS based solution if you know of one.

My goal is to concatenate multiple nav menus into a single menu on smallish screens. I have been able to achieve this, but have failed thus far on rebuilding the original structure when sizing from small to large.

Garrett Rodriguez
Garrett Rodriguez
17,588 Points
Garrett Rodriguez
Garrett Rodriguez
17,588 Points

Anything in this media query will only happen if the screen is smaller than 800px. This will make the .nav-primary disappear if you shrink the screen. Not what you asked but it might get you on the right track.

@media screen and (max-width: 800px) {
/* CSS here */
.nav-primary{
display:none;
}}

Try this in your codepen but remember to delete your js first.

You could have the nav-primary in two spots and give one of them a different class name. Hide one when the screen is over 800px and show the other then reverse their display properties when it is under 800px. Has some code repetition but it does what you want. Good luck.