bootstrap navbar is not working properly for Laravel, only a part is working
Question
I created a navbar from bootstrap inside resources/views/inc -> navbar.blade.php
<nav class="navbar navbar-inverse navbar-fixed-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="/">Project</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
The first div tag is working fine but the second div tag is not visible in the output
And I properly include the navbar in a separate file inside resources/views/layouts -> app.blade.php
<body>
@include('inc.navbar')
<div class="container">
@yield('content')
</div>
</body>
Please help me with this
edit
I removed class="collapse navbar-collapse" , then the navigation links are appearing, what is the issue with the compatibility on the collapse ?
1 answers
solution1
0 2019-06-01 18:19:22
If you are referring to wanting this div to be visible immediately (without clicking):
<div id="navbar" class="collapse navbar-collapse">...</div>
As it is, it is not meant to be visible upon load. If you want it to load, you've got an extra collapse class in there, which is effectively hiding the div, remove it, and it should be visible for you:
<div id="navbar" class="navbar-collapse"> <-- No collapse
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.