我的导航栏无法点击

Question

On clicking on navigation bar it should direct to different sections of website but it's not directing even using a href and correct id it's not directing.

UPDATE: ALSO SAME THING IS HAPPENING IN FOOTER SECTION NAVIGATION AND IN FOOTER I ADDED ALL THE CLASSES PERFECTLY OF JS THEN WHATS CREATING PROBLEM?

Working in safari browser but not in others like chrome and android browser

Basically it's responsive but links not working properly.

Any suggestions?

Github repo - https://github.com/vivanks/hackoffproject

Webpage link - https://vivanks.github.io/hackoffproject/full-page/index.html

<header id="main_menu" class="header">
            <div class="main_menu_bg ">
                <div class="container">
                    <div class="row">
                        <div class="nave_menu wow fadeInUp" data-wow-duration="1s">
                            <nav class="navbar navbar-expand navbar-default" id="navmenu">
                                <div class="container-fluid">
                                    <!-- Brand and toggle get grouped for better mobile display -->
                                    <div class="navbar-header">
                                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                            <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="#">
                                            <font color="black" size="20"><b>{ Hack Off }</b></font></a>
                                    </div>

                                    <!-- Collect the nav links, forms, and other content for toggling -->
                                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                                        <ul class="nav navbar-nav navbar-right">
                                            <li class="active"><a href="#home">Home</a></li>
                                            <li><a href="#domain">About Event</a></li>
                                            <li><a href="#pricing">Us!</a></li>


                                            <li><a href="#footer">Support</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>
                        </div>  
                    </div>

                </div>

            </div>
        </header> <!--End of header -->

Answer 1

You have put wrong class in main.js file. please use follows.

  $('.navbar-collapse').find('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: (target.offset().top - 40)
            }, 1000);
            if ($('.navbar-toggle').css('display') != 'none') {
                $(this).parents('.container').find(".navbar-toggle").trigger("click");
            }
            return false;
        }
    }
});

Answer 2

I noticed that in Safari it works but when it does it goes very smoothly to the clicked anchor. This makes me to believe that there is more than plain html here. Here is another example:

 <header id="main_menu" class="header"> <div class="main_menu_bg "> <div class="container"> <div class="row"> <div class="nave_menu wow fadeInUp" data-wow-duration="1s"> <nav class="navbar navbar-expand navbar-default" id="navmenu"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#"> <font color="black" size="20"><b>{ Hack Off }</b></font></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">Home</a></li> <li><a href="#domain">About Event</a></li> <li><a href="#pricing">Us!</a></li> <li><a href="#footer">Support</a></li> </ul> </div> </div> </nav> </div> </div> </div> </div> <section id="domain" class="domainsearce"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <div class="main_somainsearrce"> <div class="head_title text-center wow fadeInDown animated" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInDown;"> <br><br><br> <h2>Would you like to know about Hack Off ?</h2> <p>IET On Campus VIT presents to you the first hackathon of the institute's academic year. This fall we are set to conduct a hackathon like never before. There will be twenty four hours of brain-storming and coding, which will be accompanied by fun-filled mini-events. Unique problem statements will be given to over 1000 applicants and around 200 oarticipants will be selected for the final hack. It will be a national scale event and an outstanding opportunity for young and brilliant coders</p> <br> <p>Participants will develop abilities to work with and against participants who are equally motivated to innovate and design real world solutions to various problems and scenarios in todays world. With this event we strive to provide a constructive forum for innovation and coding skills, emphasizing on novelty and efficiency over procedure.</p> <br> <p>Join us and be updated for an amazing event with participation from students across the country.</p> <br><br><br> </div> <!-- End of sercelist --> </div> </div> </div> </div> </section> <section id="domain" class="domainsearce"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <div class="main_somainsearrce"> <div class="head_title text-center wow fadeInDown animated" data-wow-duration="1s" style="visibility: visible; animation-duration: 1s; animation-name: fadeInDown;"> <br><br><br> <h2>Would you like to know about Hack Off ?</h2> <p>IET On Campus VIT presents to you the first hackathon of the institute's academic year. This fall we are set to conduct a hackathon like never before. There will be twenty four hours of brain-storming and coding, which will be accompanied by fun-filled mini-events. Unique problem statements will be given to over 1000 applicants and around 200 oarticipants will be selected for the final hack. It will be a national scale event and an outstanding opportunity for young and brilliant coders</p> <br> <p>Participants will develop abilities to work with and against participants who are equally motivated to innovate and design real world solutions to various problems and scenarios in todays world. With this event we strive to provide a constructive forum for innovation and coding skills, emphasizing on novelty and efficiency over procedure.</p> <br> <p>Join us and be updated for an amazing event with participation from students across the country.</p> <br><br><br> </div> <!-- End of sercelist --> </div> </div> </div> </div> </section> <section id="footer" class="domainsearce"> </section> </header> <!--End of header --> 

This is basically part of your page where I just wanted to prove that it would work in Chrome with nothing more than just the html. Click on Support (the only section I copied for the test) and you will see that it would work on all browsers.

What JS are you using on that site? Seems something to do with that.

Answer 3

check properly the ids for home, domain and pricing