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 lorilane
lorilane
1,512 Points

Navigation issues in RWD

Hi,

I recently took your course 'Smells Like Bakin' website to learn how responsive web design works. Then I created a website for my dog using the 12 column grid system. Soon I will branch out experimenting other grid systems available....

Now I am really stumped with the navigation issues and have tried so many different ways to make it work on the regular website and for the mobile. I know I may have missed something right in front of me even when I took a day off from this project. It still eludes me.

WEBSITE: The navigation looks fine on the regular website, however, it will not float to right as I want it to float right close to the edge of the container div. The class grid is set to float left as the rest of the grid system.

MOBILE: Then for mobile and other devices (i.e., 640, 800 and 1024 breakpoints) the navigation falls below the site name and to the left. It will not budge to anything I do in CSS. I want it to center under the site name somehow. Due to frustration, I removed navigation elements from CSS because it makes no difference. It still falls down below and to the left regardless. They all looked like that via Chrome's built-in responsive design view tool and web developer tool (Firefox). However, I tested it with my IPhone and it looked completely different. The navigation looked almost centered with 320 and 480 views.

I appreciate any feedback from you guys and will be ready to attack at it again soon. :)

Thank you!

PS: In the course under Adaptive Design, I watched the video, "Finding Your Breakpoints" with captioning. I noticed that the numbers on the screen, in captioning and transcription do not match. It was confusing and took me a while to figure out the correct numbers. I believe they are in error. Aren't they correct?

3 Answers

Jason Shillingford
Jason Shillingford
6,443 Points
Jason Shillingford
Jason Shillingford
6,443 Points

on your first break point. To center the nav bar try adding this on your css.

nav .grid7{
margin-left:auto;
margin-right:auto;}
lorilane
lorilane
1,512 Points
lorilane
lorilane
1,512 Points

Hi Jason,

I got excited when I saw your solution and thought why didn't I think of that?? So I tried it (with an underscore - .grid_7) at the first breakpoint, 1024 and it didn't work. Bummer!

The only difference between Smells like Bakin Cupcake website and mine is that I did not use width for each navigation link. I use padding to create tabs. Margin is used to create spacing between tabs. I don't know if width should be used especially with the grid system.

I might have to give up on centering the navigation and use something else....

Thanks again!

Lo

lorilane
lorilane
1,512 Points
lorilane
lorilane
1,512 Points

Hey Jason,

I just wrote to Justin a few seconds ago explaining how the navigation affected the header and footer. I will be redoing the navigation differently.

Lo