The header.php file now pulls in a template part based on whether your theme setup supports bootstrap-top-navbar:
if (current_theme_supports(‘bootstrap-top-navbar’)) {
get_template_part(‘templates/header’, ‘top-navbar’);
} else {
get_template_part(‘templates/header’, ‘default’);
}
So now, to access the header to make changes to the bootstrap top nav bar you will need to go to:
your roots theme folder > templates > header-top-navbar.php.
In this short video, I’ll walk you through the steps to control positioning of the navbar in the Roots Theme for WordPress.
Roots Theme Customization – Position the Navbar from David Cochran on Vimeo.
Covered in this video:
- Create a copy of
header.phpso that you may revert back to the original navbar if desired. - Modify the markup in
header.phpto remove the class"navbar-fixed-top"and (if desired) wrap the navbar within a div of class"container". - In
app.css, adjust the styles for.navbar-inneras needed (such as to remove border-radius).
Relevant Previous Videos
If you’ve missed them, here are video introductions to prior steps, for your convenience. (Pick what’s relevant and helpful!)
Create Dropdown Menu Items
Add your Custom CSS
Don’t miss the full Roots Theme series
This is the first installment of a longer series I’m developing on Roots Theme customization.
Additional topics include:
- Getting Started
- Use your custom page template for a static front page
- More topics in the works …
Check out the full series here.
If you’d like an introduction to Twitter Bootstrap …
Again this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.
Data Enhanced 
Excellent tutorials for us the beginners!
You really saved my day here, trying to customize roots theme.
Can we please have more?
It seems like it sure has been a long time since your last post. Enjoyed the last series and hope you don’t give up on them.
Thanks teo and dj — and also for the prod, dj. I’m a bit buried in a little book project at the moment. Hope to get back to these tuts soon.
Extremely helpful tutorials for me,Sir.Keep up the good work!
Thanks very much for these tutorials, David. You’re the only game in town, creating good tutorials for Roots.
Here’s a question, or possibly a topic for another tutorial: how would you move the nav menu to another part of the page, just on one page (the front page, for example).
Here’s the content flow I’m thinking about:
1. Hero unit
2. Nav menu (on other pages the nav menu would move back up to the traditional position)
3. Content (from loop)
4. Footer
Any thoughts?
Personally, I think for WP developers of a certain flavor, Roots is the future. So thank you for recording some concise videos.
David,
I really enjoy your tuts on Bootstrap as well as Roots. Looking forward to the next ones.
Seems Roots has been tweaked a bit since this tutorial.
The header.php file now pulls in a template part based on whether your theme setup supports bootstrap-top-navbar:
if (current_theme_supports(‘bootstrap-top-navbar’)) {
get_template_part(‘templates/header’, ‘top-navbar’);
} else {
get_template_part(‘templates/header’, ‘default’);
}
so now, to access the header to make changes to the bootstrap top nav bar you will need to go to:
your roots theme folder > templates > header-top-navbar.php
Bill,
Apologies for the delayed reply. I think with some strategic work you could pull this off using conditional tags, such as this one:
http://codex.wordpress.org/Conditional_Tags#The_Front_Page
They have some examples of how to use conditional tags here:
http://codex.wordpress.org/Conditional_Tags#Working_Examples
I’m fighting with a major project and do not have the latest Roots theme open or I’d offer more detailed guidance!
Joshua,
Thanks for this update information. I’ll include it as an update in the post. Grateful!
David,
Much thanks for the tuts… very needed and useful for me, a total noob to the Roots theme. All of the resources and constant changes in this web design/dev business can get overwhelming. So again, much thanks for the wonderful resources.
Thanks. Love these tutorials. They’ve helped a noob like me very much. But please can you do a video on how to style the footer? How would I go about adding the class span4 to any widget that appears in the footer so that the columns match the 3 columns in the main content above in your example. Keep making tutorials as you’re the only one out there for us noobs.
Actually I figured out that I can edit widgets.php and add classes to each footer widget in there. Groovy.
Very good article for beginners with Roots Theme. Here’s a link with some menu styles you can use with Roots and Bootstrap: http://webdesigntutsplus.s3.amazonaws.com/tuts/312_bs/My-Bootstrap-Site-NAVBAR/navbar-examples.html
Hey Joshua,
thanks for the info, however the video seems to be gone, even with the little you published already helped me on their way.
Will you put the videos back up?
Let me know if i can help.
Regards
Yatan
Yatan,
I’ve put this back up for you, in case it’s still helpful until I start releasing updated installments. All the best,
David
its not working on my site plz help me 😦
http://www.dailynewscompany.com
The Roots Theme has changed a great deal since I wrote this. I hope to make time to update these tutorials in the coming weeks.