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

HTML

Posted by John Levy
John Levy
1,451 Points

Elements fall below the side nav menu rather than next to it

I implemented a nav menu for mobile screens which works well. The problem is now all the other elements fall below the bottom of the side menu bar rather than placed next to it. How do I get the other elements at the top of the page rather than below it. I colored the problem area yellow (line 5 in the CSS so I realize this is the problem. I just dont know how top keep the mobile nav menu while also bringing the other elements to the top of the page. If I reduce the height of the yellow background (line 3) it caused the mobile nav bar menu to show up even when it is not clicked on but I cant see how else to bring the other elements to the top of the page without reducing the height on line 3 I have attached my code below Thanks in advance http://codepen.io/Johned22/pen/RGppPm/

Graham Tonelli
Graham Tonelli
11,968 Points

Are you trying to have your nav-bar elements sit side by side?

Ash Scott
Ash Scott
435 Points

Do you have a design or an example of what you're trying to achieve?

1 Answer

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Sorry I am having a hard time explaining what I mean so I have attached a bit more of the code (sorry I have put so much in the codepen). As you can see when you when you shrink the page down to 600px it turns into the mobile version with a drop down menu tab for the different pages. The problem is when I do this the other elements for the page sits below the bottom of the drop down menu not at the top of the page. The desktop version is fine the way it is but I dont know how to make all the elements sit at the top of the page. As you can see the text and images sits below the yellow box not at the top of the page. If I remove the yellow box it also uncovers the drop down menu for the mobile screen so I cannot remove that part. I have tried placing the info between the site-wrap in the HTML but that just makes all the text clickable and it also affects the desktop version which I dont want it to do. Where am I going wrong? I have attached the code below http://codepen.io/Johned22/pen/RGppPm/ Thanks in advance