Reposition the Navbar in the Roots Theme for WordPress


UPDATE: Since I produced this tutorial, Roots has been updated so that its file structure is a bit different.From Joshua’s comment below (Thanks Joshua!):

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:

  1. Create a copy of header.php so that you may revert back to the original navbar if desired.
  2. Modify the markup in header.php to remove the class "navbar-fixed-top" and (if desired) wrap the navbar within a div of class "container".
  3. In app.css, adjust the styles for .navbar-inner as 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 …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain 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.

16 thoughts on “Reposition the Navbar in the Roots Theme for WordPress

  1. Excellent tutorials for us the beginners!
    You really saved my day here, trying to customize roots theme.
    Can we please have more?

  2. 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.

  3. 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.

  4. 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.

  5. 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

  6. Joshua,
    Thanks for this update information. I’ll include it as an update in the post. Grateful!

  7. 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.

  8. 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.

  9. Actually I figured out that I can edit widgets.php and add classes to each footer widget in there. Groovy.

  10. 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

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s