My Navigation view disappeared on both of my websites. Not sure what's wrong.

[SeloSlav]

Something must have changed in Handlebars.js because I had implemented by navigation view in the same way on two websites for apparently no reason at all. I wish I knew how to identify the change but there's just so much going on. I have no idea where to start. Anyone have any suggestions?

www.martinerlic.com
www.hypercycle.co

Essentially there were navigation bars at the top of each page and now they are both gone.

JS:

// Main Blog App

var BlogApp = new (Parse.View.extend({

    Models: {},
    Collections: {},
    Views: {},
    nodes: {},
    fn: {},

    template: Handlebars.compile($('#master-tpl').html()),

    render: function () {
        this.$el.html(this.template());
    },

    start: function () {
        this.render();
        this.$container = this.$el.find('.main-container');
        this.$sidebar = this.$el.find('.blog-sidebar');
        this.$nav = this.$el.find('.navbar-fixed');
        var router = new this.Router;
        router.start();
        this.fn.getSidebar();
    }

}))({el: document.body});

// Collections
    BlogApp.Collections.Categories = Parse.Collection.extend({
        model: BlogApp.Models.Category
    });

// Categories List View - category list in the sidebar
    BlogApp.Views.Categories = Parse.View.extend({
        className: 'sidebar-module',
        template: Handlebars.compile(Parse.User.current() ? $('#menu-logged-in-tpl').html() : $('#menu-logged-out-tpl').html()),
        render: function () {
            var attributes = Parse.User.current() ? Parse.User.current().toJSON() : {};
            this.$el.html(this.template(attributes));
        }
    });

HTML:

<!-- Templates -->
<script id="master-tpl" type="text/x-handlebars-template">
    <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
        <!-- $sidebar -->
    </div>
    <div class="container">
        <div class="section">
            <div class="main-container">
                <!-- $container -->
            </div>
        </div>
    </div>
</script>

Menu Template:

<script id="menu-logged-out-tpl" type="text/x-handlebars-template">
    <nav class="nav-down white" role="navigation">
        <div class="nav-wrapper container blog-nav-item hide-on-med-and-down">
            <a id="logo-container" href="" class="brand-logo">
                <div class="nav-hover-1"></div>
            </a>
            <ul class="right hide-on-med-and-down">
                <li>
                    <a class="blog-nav-item-sign-up nav-hover-2" href="" target="_blank" id="download-button" onclick="ga('send', 'event', 'iOS App Link Click', 'click', '1');">SUBSCRIBE TO OUR NEWSLETTER</a>
                </li>
                <li>
                    <a class="blog-nav-item-sign-up nav-hover-3" href="#/register">Sign Up</a>
                </li>
                <li>
                    <a class="blog-nav-item nav-hover-3" href="#/login">Login</a>
                </li>
                <li>
                    <a class="blog-nav-item nav-hover-4" href="#/contact">
                        <b>Contact</b>
                    </a>
                </li>
                <li>
                    <a class="blog-nav-item nav-hover-instagram" href="" target="_blank">
                        <span class="typcn typcn-social-instagram" style="font-size: 30px;"></span>
                    </a>
                </li>
                <li>
                    <a class="blog-nav-item nav-hover-facebook" href="" target="_blank">
                        <span class="typcn typcn-social-facebook" style="font-size: 30px;"></span>
                    </a>
                </li>
                <li>
                    <a class="blog-nav-item nav-hover-twitter" href="" target="_blank">
                        <span class="typcn typcn-social-twitter" style="font-size: 30px;"></span>
                    </a>
                </li>
            </ul>
        </div>
        <a href="#!" style="z-index: 6000;" class="nav-mobile brand-logo show-on-small">
            <div class="nav-hover-1">
                <span class="typcn typcn-th-menu-outline" style="font-size: 60px;"></span>
            </div>
        </a>
        <div>
            <br>
                <ul class="show-on-small">
                    <a class="blog-nav-item" href="/">
                        <h1>
                            <center>Home</center>
                        </h1>
                    </a>
                    <a class="blog-nav-item" href="#/register">
                        <h1>
                            <center>Sign Up</center>
                        </h1>
                    </a>
                    <a class="blog-nav-item" href="#/login">
                        <h1>
                            <center>Login</center>
                        </h1>
                    </a>
                    <a class="blog-nav-item" href="#/contact">
                        <h1>
                            <center>Contact</center>
                        </h1>
                    </a>
                </ul>
            </div>
            <a onClick="#!" style="cursor: pointer; z-index: 6000;" class="nav-mobile brand-logo show-on-small">
                <div id="1" class="nav-hover-1">
                    <span class="typcn typcn-delete-outline" style="font-size: 60px;"></span>
                </div>
            </a>
        </nav>
        <div class="fade-in one">
            <div class="section no-pad-bot" id="index-banner" style="background-image: url('images/background-header.png');">
                <div class="container">
                    <br>
                        <br>
                            <h3 class="header center white-text">Build Your Own Brand

                                <br>
                                                                                    Share Your Creations with the World

                                </h3>
                                <h5 class="row center" style="color: #fff;"></h5>
                                <br>
                                    <div class="row center">
                                        <h5 class="header col s12 light" style="color: #fff;">Sign Up with Email or Download the App:</h5>
                                    </div>
                                    <div class="row center">
                                        <a href="#/register" id="download-button" class="blog-nav-item btn-large waves-effect waves-light black">Email</a>
                                        <a href="https://play.google.com/store/apps/details?id=com.elgami.customizer" target="_blank" id="download-button" class="blog-nav-item btn-large waves-effect waves-light dark-green">
                                            <span class="typcn typcn-vendor-android" style="font-size: 30px;"></span>
                                        </a>
                                        <a href="" target="_blank" id="download-button" class="blog-nav-item btn-large waves-effect waves-light white" onclick="ga('send', 'event', 'iOS App Link Click', 'click', '1');">
                                            <span class="typcn typcn-vendor-apple" style="color: #000; font-size: 30px;"></span>
                                        </a>
                                    </div>
                                    <br>
                                        <br>
                                        </div>
                                    </div>
                                </div>
                                <script>
                        var previousScroll = 0, // previous scroll position
                    menuOffset = 116, // height of menu (once scroll passed it, menu is hidden)
                    detachPoint = 650, // point of detach (after scroll passed it, menu is fixed)
                    hideShowOffset = 6; // scrolling value after which triggers hide/show menu

                // on scroll hide/show menu
                $(window).scroll(function() {
                    if ($('nav').hasClass('expanded')) {
                    // do nothing; main navigation is being shown
                } else {
                    var currentScroll = $(this).scrollTop(), // gets current scroll position
                        scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling

                    // if scrolled past menu
                    if (currentScroll > menuOffset) {
                      // if scrolled past detach point add class to fix menu
                      if (currentScroll > detachPoint) {
                        $('nav').addClass('detached');
                      }

                      // if scrolling faster than hideShowOffset hide/show menu
                      if (scrollDifference >= hideShowOffset) {
                        if (currentScroll > previousScroll) {
                          // scrolling down; hide menu
                          $('nav').addClass('invisible');
                      } else {
                          // scrolling up; show menu
                          $('nav').removeClass('invisible');
                      }
                  }
              } else {
                      // only remove “detached” class if user is at the top of document (menu jump fix)
                      if (currentScroll <= 0){
                        $('nav').removeClass();
                      }
                  }

                    // if user is at the bottom of document show menu
                    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                        $('nav').removeClass('invisible');
                    }

                    // replace previous scroll position with new one
                    previousScroll = currentScroll;
                }
            })

                // shows/hides navigation’s popover if class "expanded"
                $('nav').click(function() {
                    /*showHideNav();*/
                })

                // shows/hides navigation’s popover if class "expanded" while on mobile
                $('.nav-mobile').click(function() {
                    showHideNav();
                })

                $('.blog-nav-item').click(function() {
                    hideNav();
                })

                // clicking anywhere inside navigation or heading won’t close navigation’s popover
                $('#navigation').click(function(event){
                    event.stopPropagation();
                })

                // checks if navigation’s popover is shown
                function showHideNav() {
                    if ($('nav').hasClass('expanded')) {
                        hideNav();
                    } else {
                        showNav();
                    }
                }

                // shows the navigation’s popover
                function showNav() {
                    $('nav').removeClass('invisible').addClass('expanded');
                    $('#container').addClass('blurred');
                  window.setTimeout(function(){$('body').addClass('no_scroll');}, 200); // Firefox hack. Hides scrollbar as soon as menu animation is done
                  $('#navigation a').attr('tabindex', ''); // links inside navigation should be TAB selectable
              }

                // hides the navigation’s popover
                function hideNav() {
                    $('#container').removeClass('blurred');
                  window.setTimeout(function(){$('body').removeClass();}, 10); // allow animations to start before removing class (Firefox)
                  $('nav').removeClass('expanded');
                  $('#navigation a').attr('tabindex', '-1'); // links inside hidden navigation should not be TAB selectable
                  $('.icon').blur(); // deselect icon when navigation is hidden
              }

                // keyboard shortcuts
                $('body').keydown(function(e) {
                  // menu accessible via TAB as well
                  if ($("nav .icon").is(":focus")) {
                    // if ENTER/SPACE show/hide menu
                    if (e.keyCode === 13 || e.keyCode === 32) {
                        showHideNav();
                        e.preventDefault();
                    }
                }

                  // if ESC show/hide menu
                  if (e.keyCode === 27 || e.keyCode === 77) {
                    showHideNav();
                  }
              })
     <{{!}}/script>
</script>

[stevenvachon]

Fix the indentation if you want us to read it.

[SeloSlav]

Okay it's fixed (I hope!)

[lawnsea]

The code you provide contains a bunch of other stuff unrelated to this repo. Please reopen this issue if you can provide a minimal code snippet that reproduces the problem you saw. Include the Handlebars version you are using, and, if possible, the last version for which your code worked.