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
Mahmoud Nasser
5,507 Pointsproblem with the navigation bar
i downloaded the the project files and whenever i open the index.html every things works except that the navigation bar that turns black using sticky doesnt fit to the window width "there is some space at the left and the right"dont know why
any help please !!!
Mahmoud Nasser
5,507 Pointshello Caroline
thats the link it is the jquery plugins course .... i downloaded the zip files without changing any code
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 PointsI've downloaded the files and there are several index.html files in different folders. Which file did you open? Can you please give me the path like for example using_jquery_plugins/section3/challenge_finished/index.html
Mahmoud Nasser
5,507 Pointsusing_jquery_plugins\section2\video02_finished work.html webpage hope it helps !!
4 Answers
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 PointsThe reason why the header isn't full width is because the parent container isn't full width. If you use the browsers developer tool and inspect the code you can see that the element .row has a max-width of 1280 pixels. That means it won't fill the browser window if your screen is wider than that. The CSS is set to
.row {
max-width: 1280px;
} and if you want to change the max-width to something else, maybe width: 100%, you can do so in the projects CSS file.
The reason the header goes black is because JavaScript adds the class .is-sticky to the header when you scroll. This you can see if you use the browser's developer tools as well. To change the background color you'd have to go to the CSS file and change this code `
.is-sticky .header {
background-color: black; /* change to the color you want */
}
I can definitely recommend you to use the developer tools to investigate what is happening on the page, it is very helpful. Here is a Treehouse video that explains how Chrome's developer tools works.
I hope I answered your question and solved the problem.
Best of luck with your project! :)
Mahmoud Nasser
5,507 PointsThank You very Much :) You are brilliant !! it worked
Mahmoud Nasser
5,507 PointsDid you figure it out ??
Mahmoud Nasser
5,507 Pointsanother problem poped up when i added a carousel plugin into the web site it no longer take the full width although i have set the width to 100% on .row class just like u did ??
any ideas why this happend i would be thankful :)
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 PointsTry to use the developer tool to inspect the code and see if you can find out what element is setting the width. When you find that you'll also see where in the CSS you have to change the code.
Mahmoud Nasser
5,507 Pointsokay thanks caroline :) hope i figure it out
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 PointsCaroline Forslund
Front End Web Development Techdegree Graduate 36,096 PointsHi Mahmoud, Which project are you working on? And does the problem appear before or after you made changes to the code?