I wrote below to get navigation bar. It doesn't give me any errors. But output is not what I expected. below is my html code
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation" ng-init="navCollapsed = true" >
<!--<nav class="nav navbar-default" role="navigation">-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centerd">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>List</li>
<li>Add</li>
</ul>
</div>
</div>
</nav>
Can some one help me identify what is missing. This is using angularJS bootstrap.
and what I get when I run is in below picture.
Result
I tried to identify what went wrong. Someone please have a look. This is my first time trying angular bootstrap.
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website:
meanwhile, this is the relevant code for the navbar.php
<link href="assets/css/style.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
also, not sure if it makes a difference although the PHP file is named navbar.inc.php
Thank you for taking the time to read this post
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
Maybe you should carry brand class' properties to anchor tag and remove brand class.
<a class="brand" href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>
Or, you should check if your anchor tag () is covering all the space under the div having "brand" class. In my opinion you cannot click it on phone, because a' is not taking all the width and height.
For some reason, my mobile menu is not working. Here is the code:
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
Thank you so much for taking the time to read this post!
if you used bootstrap 4.6 or some lower version chenge the jquery version and after that chenge the your jquery place in your end of your body for example
<script src="....................."></script>
<script src="....................."></script>
<script src="your jquery"></script>
now cheng the place
<script src="your jquery"></script>
<script src="....................."></script>
<script src="....................."></script>
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">Home</li>
<li>About</li>
<li>Contact</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?
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
I need a little help with my code. I'm using bootstrap and i have 3 links for now and i want them to be active as i click on them. I tried many ways to do that but i failed.
Here is my code:
<nav class="navbar navbar-default">
<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">
<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="index.php">POSLOVNA STATISTIKA</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">
<li class="active">Poslovni korisnici <span class="sr-only">(current)</span></li>
<li>Korisnici</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<ul class="nav navbar-nav">
<li <?php if(isset($_GET['poslovni_korisnici'])){ echo 'class="active"'; } ?>>Poslovni korisnici <span class="sr-only">(current)</span></li>
<li <?php if(isset($_GET['korisnici'])){ echo 'class="active"'; } ?>Korisnici</li>
</ul>
The navbar I have collapses when shrinking the screen on my desktop, but when I pull it up on a tablet or phone, it won't.
Sample Here: http://www.careerchoices.peaktopeak.org/CareerChoices/home.php
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="CareerChoices.php">Career Choices</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class = "logout">Log Out </li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
I've been able to have a mobile collapsing navbar on a separate page http://www.careerchoices.peaktopeak.org/CareerChoices/CareerChoices.php,
but even with almost identical code this bar won't collapse.
I've googled around, but I'm just beginning with bootstrap - most of my work has been almost copy pasted from Bootstrap templates.
Any ideas?
you should use
<meta name="viewport" content="width=device-width, initial-scale=1">
that meta say to browser to set width of page equal device width
you can see this on boostrap web site :
http://getbootstrap.com/css/#overview-mobile