navbar links , such as about and contac, don't work : Can anyone tell me please how I can fix my navbar link problem in the code below? I tried almost everything. and read all related stackoverflow article and sort of things but cant figure it out!

[nothing happens when i click on about or contact][1]


  [1]: https://i.stack.imgur.com/D8Sot.png

-----
i REALLY appreciate if someone has a clue or any idea that could be helpfull for me!

thanks in advance

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Welcome</title>

        <!-- Bootstrap core CSS -->
        {% load staticfiles %}
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
         <link href="{% static 'personal/css/bootstrap.min.css' %}"  rel="stylesheet" />
         <link href="{% static 'personal/css/navbar-static-top.css' %}" rel="stylesheet">
         <link href="{% static 'personal/css/custom.css' %}" rel="stylesheet">



        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>
        <!-- NAVBAR
        ================================================== -->

        <div class="container">

                    <nav class="navbar navbar-default navbar-static-top">
                      <div class="container">
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'personal/img/mvp_landing_logo.png' %}" /></a>
                        </div>
                        <div id="navbar" class="navbar-collapse collapse">
                          <ul class="nav navbar-nav">
                            <li><a href="{% url 'home' %}">Home</a></li>
                            <li><a href="{% url 'about' %}">About</a></li>
                            <li><a href="http://www.jssor.com/tutorial/index.html">Tutorial</a></li>
                            <li><a href="{% url 'contact' %}">Contact</a></li>
                          </ul>
                      </div><!--/.nav-collapse -->
                      </div>
                    </nav>

         </div>

        <!-- Use a container to wrap the slider, the purpose is to enable slider to always fit width of the wrapper while window resize -->
        <div class="container">

            <!-- Jssor Slider Begin -->
            <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
            <!-- ================================================== -->
            <script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
    		<script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>

    		<script>
    		    jssor_slider1_starter = function (containerId) {
    			//Reference http://www.jssor.com/development/slider-with-slideshow-no-jquery.html
    			//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html

    			var _SlideshowTransitions = [
    			//Fade
    			{ $Duration: 3200, $Opacity: 2 }
    			];

    			var options = {
    			    $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
    			    $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
    			    $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
    			    $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
    			    $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
    				$Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
    				$Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
    				$TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
    				$ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
    			    }
    			};

    			var jssor_slider1 = new $JssorSlider$(containerId, options);
    		    }
    		</script>


              <div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 1140px; height: 442px; overflow: hidden;">

                <!-- Loading Screen -->
                <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                    <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;

                    background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;">
                    </div>
                    <div style="position: absolute; display: block; background: url(/static/personal/img/loading.gif) no-repeat center center;

                    top: 0px; left: 0px;width: 100%;height:100%;">
                    </div>
                </div>

                <!-- Slides Container -->
    		<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 1140px; height: 442px;
    		overflow: hidden;">
    		    <div>
    		        <img u="image" src="{% static 'personal/img/01.jpg' %}" />
    		    <div>
    		    </div>
    		        <img u="image" src="{% static 'personal/img/02.jpg' %}" />
    		    </div>
    		    <div>
    		        <img u="image" src="{% static 'personal/img/03.jpg' %}" />
    		    </div>
    		    <div>
    		        <img u="image" src="{% static 'personal/img/04.jpg' %}" />
    		    </div>
    		</div>
    	<a style="display: none" href="http://www.jssor.com">content slider</a>
             <!-- Trigger -->
            <script>
                jssor_slider1_starter('slider1_container');
            </script>
               
                <!--#region Bullet Navigator Skin Begin -->
                <!-- Help: http://www.jssor.com/tutorial/set-bullet-navigator.html -->
                <style>
                    /* jssor slider bullet navigator skin 05 css */
                    /*
                    .jssorb05 div           (normal)
                    .jssorb05 div:hover     (normal mouseover)
                    .jssorb05 .av           (active)
                    .jssorb05 .av:hover     (active mouseover)
                    .jssorb05 .dn           (mousedown)
                    */
                    .jssorb05 {
                        position: absolute;
                    }
                    .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
                        position: absolute;
                        /* size of bullet elment */
                        width: 16px;
                        height: 16px;
                        background: url(static/personal/img/b05.png) no-repeat;
                        overflow: hidden;
                        cursor: pointer;
                    }
                    .jssorb05 div { background-position: -7px -7px; }
                    .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
                    .jssorb05 .av { background-position: -67px -7px; }
                    .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
                </style>
                <!-- bullet navigator container -->
                <div u="navigator" class="jssorb05" style="bottom: 16px; right: 6px;">
                    <!-- bullet navigator item prototype -->
                    <div u="prototype"></div>
                </div>
                <!--#endregion Bullet Navigator Skin End -->
                
                <!--#region Arrow Navigator Skin Begin -->
                <!-- Help: http://www.jssor.com/tutorial/set-arrow-navigator.html -->
                <style>
                    /* jssor slider arrow navigator skin 11 css */
                    /*
                    .jssora11l                  (normal)
                    .jssora11r                  (normal)
                    .jssora11l:hover            (normal mouseover)
                    .jssora11r:hover            (normal mouseover)
                    .jssora11l.jssora11ldn      (mousedown)
                    .jssora11r.jssora11rdn      (mousedown)
                    */
                    .jssora11l, .jssora11r {
                        display: block;
                        position: absolute;
                        /* size of arrow element */
                        width: 37px;
                        height: 37px;
                        cursor: pointer;
                        background: url(static/personal/img/a11.png) no-repeat;
                        overflow: hidden;
                    }
                    .jssora11l { background-position: -11px -41px; }
                    .jssora11r { background-position: -71px -41px; }
                    .jssora11l:hover { background-position: -131px -41px; }
                    .jssora11r:hover { background-position: -191px -41px; }
                    .jssora11l.jssora11ldn { background-position: -251px -41px; }
                    .jssora11r.jssora11rdn { background-position: -311px -41px; }
                </style>
                <!-- Arrow Left -->
                <span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;">
                </span>
                <!-- Arrow Right -->
                <span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
                </span>
                <!--#endregion Arrow Navigator Skin End -->
                <a style="display: none" href="http://www.jssor.com">Bootstrap Carousel</a>
            </div>
            <!-- Jssor Slider End -->
        </div>

        <!-- Marketing messaging and featurettes
        ================================================== -->
        <!-- Wrap the rest of the page in another container to center all the content. -->

        <div class="container marketing">

            <hr class="featurette-divider">

            <div class="row featurette">
                <div class="col-md-7">
                    <h2 class="featurette-heading">This page runs <a href="http://getbootstrap.com" target="_blank" rel="nofollow">Bootstrap</a> with Jssor Slider.</h2>
                    <p class="lead">Use Jssor Slider as a compoment of Bootstrap is extremly easy. Given a slider you worked out, to integrate it with Bootstrap, you can just copy javascript and html code and paste it into your page. This page is a simple demo, please view source of this page or download <a href="http://www.jssor.com/download-bootstrap-carousel-slider-example.html">Bootstrap Carousel Slider Example</a>.</p>
                </div>
                <div class="col-md-5">
                    <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
                </div>
            </div>

            <hr class="featurette-divider">

            <div class="row featurette">
                <div class="col-md-5">
                    <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
                </div>
                <div class="col-md-7">
                    <h2 class="featurette-heading">Javascript Code</h2>
                    <div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
                        <pre style="margin:0px;">
    &lt;script type="text/javascript" src="../js/jssor.slider.mini.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        jQuery(document).ready(function ($) {
            var options = {
                ..
            };
                
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
            ...
        });
    &lt;/script&gt;</pre>
                    </div>
                </div>
            </div>

            <hr class="featurette-divider">

            <div class="row featurette">
                <div class="col-md-7">
                    <h2 class="featurette-heading">HTML Code</h2>
                    <div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
                        <pre style="margin:0px;">
    &lt;div class="container"&gt;
        &lt;!-- Jssor Slider Begin --&gt;
        &lt;div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;"&gt;
            ...
        &lt;/div&gt;
        &lt;!-- Jssor Slider End --&gt;
    &lt;/div&gt;</pre>
                    </div>
                </div>
                <div class="col-md-5">
                    <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
                </div>
            </div>

            <hr class="featurette-divider">

            <!-- /END THE FEATURETTES -->
            <!-- FOOTER -->
            <footer>
                <p class="pull-right"><a href="#">Back to top</a></p>
                <p>&copy; Jssor Slider 2009 - 2016. &middot; <a href="#">Privacy</a> &middot; </p>
            </footer>

        </div><!-- /.container -->

        <!-- Bootstrap core JavaScript
        ================================================== -->
         <!-- Placed at the end of the document so the pages load faster -->
        <script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
        <script src="{% static 'personal/js/bootstrap.min.js' %}"></script>

        <script src="{% static 'personal/js/docs.min.js' %}"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="{% static 'personal/js/ie10-viewport-bug-workaround.js' %}"></script>

        <!-- jssor slider scripts-->
        <!-- use jssor.slider.debug.js for debug -->
        <script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>
        <script>

            jQuery(document).ready(function ($) {
                var options = {
                    $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                    $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                    $Idle: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                    $PauseOnHover: 1,                                   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

                    $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                    $SlideEasing: $JssorEasing$.$EaseOutQuint,          //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad
                    $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                    $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                    //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                    //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                    $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0
                    $Cols: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                    $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                    $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
                    $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
                    $DragOrientation: 1,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)

                    $ArrowNavigatorOptions: {                           //[Optional] Options to specify and enable arrow navigator or not
                        $Class: $JssorArrowNavigator$,                  //[Requried] Class to create arrow navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                        $Scale: false                                   //Scales bullets navigator or not while slider scale
                    },

                    $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                        $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                        $Rows: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                        $SpacingX: 12,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                        $SpacingY: 4,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                        $Orientation: 1,                                //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                        $Scale: false                                   //Scales bullets navigator or not while slider scale
                    }
                };

                var jssor_slider1 = new $JssorSlider$("slider1_container", options);

                //responsive code begin
                //you can remove responsive code if you don't want the slider scales while window resizing
                function ScaleSlider() {
                    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                    if (parentWidth) {
                        jssor_slider1.$ScaleWidth(parentWidth - 30);
                    }
                    else
                        window.setTimeout(ScaleSlider, 30);
                }
                ScaleSlider();

                $(window).bind("load", ScaleSlider);
                $(window).bind("resize", ScaleSlider);
                $(window).bind("orientationchange", ScaleSlider);
                //responsive code end
            });
        </script>
    </body>
    </html>

<!-- end snippet -->





