CMS Development

LaurenLokker
投稿者 | Diamond Partner
投稿者 | Diamond Partner

Need help making my navigation bar static

解決

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/

3件の承認済みベストアンサー
Jsum
解決策
キーアドバイザー

Need help making my navigation bar static

解決

@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
解決策
投稿者 | Diamond Partner
投稿者 | Diamond Partner

Need help making my navigation bar static

解決

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. 

 

2017-09-27_0719.png

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

2017-09-27_0720.png

 

Thanks,

Lauren

元の投稿で解決策を見る

Jsum
解決策
キーアドバイザー

Need help making my navigation bar static

解決

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

元の投稿で解決策を見る

4件の返信
Jsum
解決策
キーアドバイザー

Need help making my navigation bar static

解決

@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
解決策
投稿者 | Diamond Partner
投稿者 | Diamond Partner

Need help making my navigation bar static

解決

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. 

 

2017-09-27_0719.png

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

2017-09-27_0720.png

 

Thanks,

Lauren

Jsum
解決策
キーアドバイザー

Need help making my navigation bar static

解決

@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
投稿者 | Diamond Partner
投稿者 | Diamond Partner

Need help making my navigation bar static

解決

Thanks so much for your help. スマイリー とてもハッピー

0 いいね!