Bootstrap nav-link class is not working in Chrome, but works in Firefox, navigates to corresponding section
Question
I am not familiar with Bootstrap, and I am trying to customize a one-page web template. Having the sample on http://lidia.gq . My problem is that the menu items that it has, are not workable in Chrome. So, when I click any menu item, it does nothing, when it should navigate to the corresponding section from the page. I am using Version 68.0.3440.106. But on other browsers like Firefox, Microsoft Edge, Internet Explorer, and on mobile Chrome I do not encounter this problem, all menu items successfully work.
So, why does it not work on Chrome Windows PC?
HTML
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#home"><img src="img/logo.png" alt="" /></a>
<!--Links-->
<ul class="nav navbar-nav pull-right hidden-md-down text-uppercase">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#newsletter">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#!"><i class="fa fa-search fa-lg"></i></a>
</li>
</ul>
</div>
It Uses Bootstrap v4.0.0-alpha.2
http://lidia.gq/css/bootstrap.min.css
Maybe someone encountered the same problem? Is there a way to fix it?
2 answers
solution1
0 2018-09-09 21:26:34
There's no error with your code. But I guess you have errors in calling the required source files for bootstrap.
Files needed inside <head> tag:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Files needed before </body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Your HTML code should look like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#home"><img src="img/logo.png" alt="" /></a>
<!--Links-->
<ul class="nav navbar-nav pull-right hidden-md-down text-uppercase">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#newsletter">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#!"><i class="fa fa-search fa-lg"></i></a>
</li>
</ul>
</div>
I hope this helps.
solution2
0 2018-12-01 13:09:15
I did a little bit of bootstrap learning and debugging, and I figured out what was my problem, and I very happy about it. Finally I made my menu workable.
The problem is related to this top tag
<div class="navbar-desktop">
I mentioned, that I also have in my body tag:
<body data-spy="scroll" data-target=".navbar-desktop">
and my html is using the main.js
<script type="text/javascript" src="js/main.js"></script>
which calls the jquery
// localScroll js
jQuery(".navbar-desktop").localScroll();
If I comment that last line (or rename), from main.js , my menu works. Basically, seems that this code from java script confuses my code, and instead off calling .navbar-desktop from bootstrap nav, it uses the one from java script.
Not sure though what this code from body tag tries to do. Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.