Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Html

Bootstrap Navbar On Mobile Not Working

Post a Comment
I'm making a site for my club in school (Brazil) and I'd like to know how to fix the issue in my site on mobile. The three lines in mobile when pressed don't do anything.

Solution 1:

Hi refers to Bootstrap Documentation.

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

You need to add these lines into your page in order to work.

<scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script>

I used Bootstrap 4 Editor and copied your code in and it works perfectly, because the editor has built-in bootstrap javascripts.

Solution 2:

You have to add jquery and bootstrap js before closing the body to get the working toggle.

Note: The order is important here, put the jquery js link first and then bootstrap js.

<html><head><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"crossorigin="anonymous"><title>ClubeDiversidade</title></head><style>body {
    background-color: orange;
  }
</style><body><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Clube da diversidade</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNavDropdown"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href="#">Pagina inicial <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Inscrição</a></li><liclass="nav-item"><aclass="nav-link"href="sobrenatural.html">Sobrenatural</a></li><liclass="nav-item"><aclass="nav-link"href="#">Tecnologia</a></li><liclass="nav-item"><aclass="nav-link"href="#">Outras atividades</a></li></ul></div></nav><divclass="container-fluid"><center>Bem-vindo!!</center></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script></body></html>

Post a Comment for "Bootstrap Navbar On Mobile Not Working"