How To Enable .navbar-fixed-top Inside The Builder

TODO:

HTML

<header id="main-nav" data-appc-theme="dark" data-appc-themes="default: #eee; dark: #222; red: #f00;">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-items">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar-brand-centered1">
                    <a href="/"><img src="{{builder_resources}}/builder/images/appcropolis-logo.png" alt="" class="" id=""></a>
                </div>
            </div>
            <!-- the items  -->
            <div class="collapse navbar-collapse" id="main-nav-items">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="/">Work</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="/services/">Services</a></li>
                    <li><a href="/contact/">Contact</a></li>
                    <li><a href="/contact/" class="btn-nav rounded">Sign in</a></li>
                    <li><a href="/contact/" class="btn-nav rounded">Join</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</header>

 

CSS

@media (min-width: 992px) {
    .in-builder #main-nav .navbar-fixed-top {
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

 

Javascript

// javascript 
(function() {
    $(window).on('scroll', function(e) {
        try {
            var scrollYMin = 10; 
            var scrolledClass = 'scrolled';
            if(window.scrollY > scrollYMin) {
                $('#main-nav').addClass(scrolledClass);
            } else {
                $('#main-nav').removeClass(scrolledClass);
            }
        } catch(e) {
            ('console' in window) && console.log(e);
        }
    });
})($);