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
farhanasalman
Front End Web Development Techdegree Student 2,830 PointsHow to create the navigation bar at the top while scrolling down the page?
Hello all,
I would be grateful if could you please help me out with an issue?
I am using wordpress themes called GeneratePress and my website
I want the Navigation Bar to be on top (completely stretched to the width of the screen ) and the header below the navigation bar.
For example I like this website
2 Answers
Muhammad Mohsen
Courses Plus Student 10,843 PointsHi farhana,
Within your style.css
Find
.nav-aligned-center.nav-below-header .main-navigation
and replace text-align: center; With
.nav-aligned-center.nav-below-header .main-navigation {
text-align: center;
position: fixed;
top: 0;
width: 100%;
}
Then go to your body (you have it commented)
/*body {
background: #fff;
}*/
change it to
body {
padding-top: 70px;
}
farhanasalman
Front End Web Development Techdegree Student 2,830 PointsYes right.
farhanasalman
Front End Web Development Techdegree Student 2,830 Pointsfarhanasalman
Front End Web Development Techdegree Student 2,830 PointsThanks Mohsen! It is working!
One more thing, if I want the Navigation Bar should be below and the header should be on the top the navigation bar
What css code should be like?
Muhammad Mohsen
Courses Plus Student 10,843 PointsMuhammad Mohsen
Courses Plus Student 10,843 PointsYou mean to be as it is now (on your site) but make it fixed to top?