Navbar bootstrap menu not showing in mobile
Question
Here's my header.php When I try it out on my mobile, the navigation bar doesn't work on mobile. all menu properly shown in desktop screen but it doesn't display in tab or mobile. here is my code.
<!DOCTYPE html>
<html>
<head>
<title>International Pvt. Ltd.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.0/minty/bootstrap.min.css" rel="stylesheet" integrity="sha384-b8rPE9Kj0lNck6sxWxUIJRCE3IHrqNXF74vcnXKYS/NZPi7WInVsaIKeEjIDpyNt" crossorigin="anonymous">
<link rel="stylesheet" href="#assets/css/style.css">
<script src="https://cdn.ckeditor.com/4.9.1/standard/ckeditor.js">/script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">International</a>
</div>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto" >
<li class="nav-item"><a class="nav-link" href="#">Home</a</li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#posts">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#categories">Categories</a></li>
<?php if(!$this->session->userdata('logged_in')) : ?>
<li class="nav-item"><a class="nav-link" href="#users/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="#users/register">Register</a></li>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')) : ?>
<li class="nav-item"><a class="nav-link" href="#posts/create">Create Post</a></li>
<li class="nav-item"><a class="nav-link" href="#categories/create">Create Category</a></li>
<li class="nav-item"><a class="nav-link" href="#users/logout">Logout</a></li>
<?php endif; ?>
</ul>
</div>
</div>
</nav>
[...]
</body>
3 answers
solution1
1 2018-04-19 07:09:16
Remove class "collapse" from
<div class="collapse navbar-collapse" id="navbarColor01">
To create a collapsible navigation bar, use a button with class="navbar-toggle", data-toggle="collapse" and data-target="#thetarget". Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button: "thetarget"
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Also you will have to include bootstrap's js.
solution2
0 ACCPTED 2018-04-19 07:10:43
Your navbar is hidden. Add some button (hamburger) which will show Your navbar:
<div class="col-10 text-right d-md-none">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
Put it before div with yours ul .This code example is from my project - Of course You have to adjust classes to Your project.
solution3
0 2018-04-19 07:14:04
The script tag for bootstrap is not included. Bootstrap needs the javascript to run some of these animations. So include a script tag of bootstrap.min.js and also include jquery.min.js and jquery UI as some animations use these. Here are the above-mentioned script tags. Happy coding :)
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
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.