Need help making my navigation bar static

[LaurenLokker]

Hi there,

Our navigation bar has an effect which causes it to fold away as you scroll down the page. I would like to switch that effect off - keeping the bar static all the way down the page. Is there anyone who could talk me through how to do this?

We're also having a problem with our mobile menu display - the logo doesn't shrink, and so the menu buttons sit on top of it. 

https://www.spitfireinbound.com/

[Jsum · Accepted solution]

@LaurenLokker,

This:

if (e("#top").length > 0) {
        var b = document.getElementById("top");
        var a = new Headroom(b, {
            offset: 205,
            tolerance: 5,
            classes: {
                initial: "animated",
                pinned: "swingInX",
                unpinned: "swingOutX"
            }
        });
        a.init()
    }

is in your 

https://www.spitfireinbound.com/hs-fs/hub/2359721/hub_generated/template_assets/1505831390907/Custom/page/Launch_Theme_2016/launch_theme_script.min.js

javascript file. If you remove it then it should take that effect away.

[LaurenLokker · Accepted solution]

Hi Jsum,

Thanks so much, the bar is staying visible now.

One more question, could you show me which code to remove to stop the bar from sliding out and back in again, and to stop the navigation items moving to the top. 

As you scroll down the navigation items top align and then stay there:

Thanks,

Lauren

[Jsum · Accepted solution]

@LaurenLokker,

This:

if (e("#top").length > 0) {
        var b = document.getElementById("top");
        var a = new Headroom(b, {
            offset: 205,
            tolerance: 5,
            classes: {
                initial: "animated",
                pinned: "swingInX",
                unpinned: "swingOutX"
            }
        });
        a.init()
    }

is in your 

https://www.spitfireinbound.com/hs-fs/hub/2359721/hub_generated/template_assets/1505831390907/Custom/page/Launch_Theme_2016/launch_theme_script.min.js

javascript file. If you remove it then it should take that effect away.

[LaurenLokker · Accepted solution]

Hi Jsum,

Thanks so much, the bar is staying visible now.

One more question, could you show me which code to remove to stop the bar from sliding out and back in again, and to stop the navigation items moving to the top. 

As you scroll down the navigation items top align and then stay there:

Thanks,

Lauren

[Jsum · Accepted solution]

@LaurenLokker,

That same javascript file is adding a class of "sticky" to the header on scroll. The css for the "sticky" class is:

.row-fluid .header.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    padding: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: slideDown;
    background: #FFFFFF;
    -webkit-box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
    -o-box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
    -ms-box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
    box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
}

When this class is applied the header is pulled out of the normal document flow and becomes force positioned as fixed to the top of the screen. The top black bar isn't effected so it stays in the document flow and is scrolled away.

To make the black bar stay with the header you would need to change the javascript to apply "sticky" to the wrapper for both the black bar and main header, then change the css to apply to that wrappers class.sticky instead of .header.sticky.

If you are just trying to remove the navigation then remove the animation call in the css. The animation attribute is calling a css animation that is probably further down the page named "SlideDown". You can remove or leave the actual animation code but you'll want to remove the animation call either way in the sticky css to stop the animation. 

If you are wanting stop the sticky all together you can just remove the javascript causing "sticky" to be added to the header on scroll.

If I answered your original question please accept my answer as the solution.

[LaurenLokker]

Thanks so much for your help.