Hi I'm trying to make bootstrap work in my cakephp project. I'm just starting to learn cake and I dont know why my collapse doesnt work.
In my webroot\css\ i have my bootstrap.css file. In my webroot\js i have bootstrap.min.js, collapse.js, transition.js files.
In my src\Template\Layout\default.ctp i wrote
<?= $this->Html->css('bootstrap') ?>
<?= $this->Html->script(['bootstrap.min','collapse','transition']) ?>
and on the <body> tag i wrote...
<nav class="navbar navbar-inverse navbar-static-top" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bookmarks</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="">Add Bookmarks</li>
<li>Export Data Modified</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</nav>
But everytime I test the collapse by making my browser smaller. When I click the "burger" the items don't come out. Any idea why?
Your not closing your nav tag or did you just forget to post it?
I tried doing it, It works for me. Look for the console error messages. This may be due to the loading of css, script files.May be your server doesnt support <?= ?> tags. Try using <?php ?> tags. And Please tell what are the error messages which you get, when something is not working. So that it will be easier for anyone to debug.
Related
Need help to resolve the bootstrap dropdown navigation issue. I followed all the rules available but I am missing something. Please help.
The service tab has two drop down li which should open when click on the caret. But the website css is not allowing to do so.
<!-- navbar-header -->
<div class="header-nav">
<nav class="navbar navbar-default">
<div class="navbar-header logo">
<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>
<h1>
<a class="navbar-brand" href="http://www.example.com/">Brand Name</a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>SEO Service</li>
<li>Digital Marketing</li>
</ul>
</li>
<li>Projects</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
<div class="contact-bnr-w3-agile">
<ul>
<!--<li><i class="fa fa-envelope" aria-hidden="true"></i>info#example.com</li>-->
<li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li>
</ul>
</div>
<div class="clearfix"> </div>
</nav>
<div class="clearfix"> </div>
</div>
You have a typo in your code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Here, data-target represents the div that is being targeted for toggling when you click the button. So, it is looking for the div with the ID "bs-example-navbar-collapse-1". This line is fine, though I'd recommend renaming it to something more useful, like "site-nav" or something.
Now, here is where the problem occurs:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
This is the div that you are (correctly) trying to expand/collapse. But you have given it the id "bs-example-navbar-collapse-1 navis", which is not the same as "bs-example-navbar-collapse-1". So, you are clicking the button, but no div is being found with a matching ID.
To solve this, set the ID to "bs-example-navbar-collapse-1" instead (remove "navis"):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Now, all should be right in the world.
Also, far as the jQuery warnings mentioned above, it seems you are loading jQuery 2 already, so you don't need to include 1.12 as well. So make sure you are including the jQuery lib that you want.
I'm trying to make dropdown navbar box black, I've been looking for solution for 2 days, but still even templates from bootstrap docs doesn't work properly, I mean that dropdown box.
Here is my html code for navbar:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-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 navbar-link"><img src="/images /logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Courses </li>
<li role="presentation">Help
<a class="visible-sm-block" href="#"> </a>
</li>
</ul>
</div>
</div>
</nav>
Here is Page hierarchy:
You're correctly using .navbar-inverse, which should already be making your navbar black, as can be seen here.
There are a couple of reasons why this may not be working for you.
You've not referenced Bootstrap correctly.In this case, check for errors in your F12 Developer Tools' console.
You're using CSS for a different version of Bootstrap than the one you've loaded.
You have code that is overriding the defaults with higher specificity.
You have cached outdated CSS. Refresh your stylesheet refrence with CTRL + F5, and hold SHIFT while clicking on the refresh icon to ensure you clear your CSS cache as well.
Hope this helps! :)
The button to toggle the nav bar won't function. I've checked through the answers to similar questions and can't see anything wrong with my html. Help much appreciated!
I can see all the li items in my navbar but cannot hide them.
Here's the relevant html:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="home">Simmo Simpson</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav">
<li>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
</ul>
</div>
<div id="#myNavbar" class="collapse navbar-collapse" >
<ul class="nav navbar-nav pull-left">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active"><a href="#contact" >Contact</a></li>
</ul>
</div>
</div>
</nav>
I've also included this at the bottom (and stylesheets etc in the meta section):
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
First off, add type="text/javascript" to the script tags for jquery/javascript includes.
Thirdly, check your server/site/browser configuration in terms of 'cross-site scripting'. I believe this may be your issue here. When you call a script with cross-origin, you are trying to execute the script remotely and for security purposes this tends to be disabled by default for a lot of web sites and/or servers. To get around this, I would recommend downloading the bootstrap CSS/JS files and referencing them from your sites director as apposed to a CDN.
I also see that you had an issue where by you included a '#' in an element id;
<div id="#myNavbar" class="collapse navbar-collapse" > - Upon fixing this the code stopped working, this is because you may not have changed the target ID of the bootstrap toggle button, see; <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">.
In both of these lines the ID's need to match, that being the ID of the navbar element to be toggled, and the button that does the toggling.
I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
I've just started to mess around with web-development and I only have experience on struts2 development, where I used sitemesh to decorate pages. I'm curious about web development and I'd like to start building a site using twitter bootstrap only, but I'm not sure on how to keep my navbar from page to page.
I'm kind of lost so... Is there any "good practise" on this issue? I've googled around for some time and found little help on this topic. Shall I create a HTML file and "import" it in any way on all of my pages? How do you usually do it?
Just move your navbar div from your index.html to a different file, say navbar.php and just add this in the line where you removed the navbar:
<?php include ('navbar.php'); ?>
Make sure to:
Rename the extension of your index file from index.html to index.php.
Keep the navbar.php in the same directory as your index file. (If you keep it in a different directory, then specify it accordingly in the php code above).
Example:
If this is your current code:
<body>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
<!--Rest of your page contents-->
....
</body>
Then just extract the navbar part and move it to a navbar.php file and your index file will look like this now:
<body>
<?php include ('navbar.php'); ?>
<!--Rest of your page contents-->
....
</body>