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

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Creating Bootstrap Navigation in WordPress

Sarah Jee Watson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points
Posted by Sarah Jee Watson
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points

Changes to Nav on Scroll

So the current nav stays in the window when scrolling, which is fine except I need to change the styling of it. I added a new class to the nav when the user scrolls down 100px

<! Change Nav class on scroll -->   

   <script>
        jQuery(window).scroll(function() {    
    var scroll = jQuery(window).scrollTop();

    if (scroll >= 400) {

        jQuery("#navbar").addClass("scrolled navbar-static-top");
    } else {
        jQuery("#navbar").removeClass("scrolled");
    }
});
    </script>

This works fine, except the 'new' nav appears inside the container. How can I make this full width?

Crazy idea? I'm actually using 2 headers - one on the home page and one everywhere else. Could I swap out header1.php for header2.php in place of .addClass??!

1 Answer

Mark Truitt
Mark Truitt
17,230 Points

Hi Sarah,

You could just make 2 separate header files can call them with the correct templates.

get_header ('home');

get_header('sub');

files would be named: header-home.php header-sub.php

You could also set this all up to use conditionals based on the page and pull them that way as well.

https://codex.wordpress.org/Function_Reference/get_header

As far as making it full width. You just need to move the nav outside of the container it is in.

Mark