I made a dropdown nav-bar, I want to link the dropdown menu to a different section on a different blade.
What I want to know is how to link section of another blade into href="{{ route('somepage')}}" like I want to go to somepage.blade.php and in my dropdown menu, I want to click dropdown submenu to go to directly to the section I want.
i think you can create include folder in views folder then you can create file in include folder after that you can write the code of navbar in it ..like this :
<header>
<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" aria-expanded="false">
<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="{{ route('dashboard')}}">Brand</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 navbar-right">
<li>Account</li>
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
then you can do something like import it in any view you want ...like it:
<body>
#include('includes.header')
<div class="container">
#yield('content')
</div>
<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
Related
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<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" aria-expanded="false"> <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="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</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 navbar-right">
<li>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
Trying to figure out why the dropdown menu isn't working on a link. A link to the webpage is http://nathanielmignotte.ca/Work/EMO/beprepared.html.
<!-- Navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#"> </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Ministry Home</li>
<li>Newsroom</li>
<li>About The Ministry</li>
<li class="dropdown active">
This is were I implemented the dropdown menu on the Be Prepared Link
<a class="dropdown-toggle" data-toggle="dropdown" href="beprepared.html">
Be Prepared
</a>
<ul class="dropdown-menu">
<li>Outdoor</li>
<li>Seasonal</li>
<li>Electronic</li>
<li class="divider">Outdoor</li>
<li>Sale Items</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right hideBtn">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</ul>
</div>
</div>
</div>
<!-- End Nav Bar -->
Having looked at http://nathanielmignotte.ca/Work/EMO/beprepared.html, the first thing you need to do is look at your script files:
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
You're loading jQuery 1.10.2, then you're loading Bootstrap.js. So far, so good.
Then you're loading Boostrap.min.js, which is a minified version of the same JS file you've already loaded. This will cause conflicts. Remove the <script src="js/bootstrap.js"></script> line, so you only get the minified version.
Finally, you're loading in a minified version of jQuery (jquery.min.js). Loading this after the other scripts will likely cause issues with the jQuery scripts that have already run (scripts are run in the order that they're loaded). What's more, it's not even the same version of jQuery, so it will definitely cause problems. So remove the <script src="js/jquery.min.js"></script> line entirely.
You should end up with this:
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
Better now?
The links within my site's header/navigation aren't working for some reason. I think it has something to do with the CSS I am using but I have followed the code exactly like it is on Bootstrap's documentation site. Can someone help me fix this error?
You can view the full site here: http://kaybesee.com/mb
Here is my HTML:
<div id="nav-wrapper">
<nav class="navbar" role="navigation" data-spy="affix" data-offset-top="1000" data-offset-bottom="200">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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="#"><img src="img/logoTextRight.png" class="img-responsive"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-button">Portfolio</li>
<li class="nav-button">About Us</li>
<li class="nav-button">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div><!-- #nav-wrapper -->
Believe this is related, you have a e.preventDefault on your li click line 36 on your index. I don't really see a reason for that, but since your anchor is inside, the anchor click event never fires.
Remove e.preventDefault();
$('ul.nav > li').click(function (e) {
e.preventDefault();
You Should Match the Page ID with the Tab ID in the CSS . I think there is some bug with bootstrap nav class.
See this article for more information. http://webdesign.about.com/od/layout/a/aa042307.htm .
The navbar worked properly once but i made some changes and it no longer works. When I make the window small the toggle square shows up but when i click on it - nothing happens.
Note: The navbar works fine in full screen - its just in small windows, when I click on the toggle button - the drop down menu doesn't appear
Was wondering if anyone knew how to fix it.
Here is my code for the header :
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
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="#">CHRONOS LOGO</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SOCIAL<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Google+</li>
<li class="divider"></li>
<li>Facebook</li>
<li class="divider"></li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
FOOTER:
<button type="submit" name="submit" id="submit"
class="btn btn-primary btn-lg">
Submit
</button>
</form>
</div>
<?php } ?>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="regform/js/jquery.validate.js"></script>
<script src="regform/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function() {
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>
You have the wrong value on the data-target attribute; it should instead be:
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"> <!-- You had ID from the docs example -->
</button>
http://jsfiddle.net/fZTgH/1/
This is most likely a js problem as the code looks fine. Make sure that you have the bootstrap.min.js file in the header or at the bottom of the js header stack (under all the other js files).
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
For a further inspection, please update your question with the header code or a link to the site
I have a basic page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<style>
body { padding-top: 70px; }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Brand</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 navbar-right">
<li><span class="glyphicon glyphicon-envelope"></span></li>
<li><span class="glyphicon glyphicon-off"></span></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container">
<div class="col-md-3">Sidebar</div>
<div class="col-md-9">Content</div>
</div>
</body>
</html>
When viewed on a small screen, as expected, the nav bar content collapses into a right-aligned button with a drop-down menu. Somewhat awkward, however, is that my envelope icon and off icon look somewhat awkward when they get collapsed into the small-screen drop-down menu. They look good, however, as simple icons with no text on the full-sized nav bar. Is there a way to have text applied to these icon links so that it will display in the collapsed menu but not in the full nav-bar? Thanks.
For exemple :
<span class="icon-bar">
<span class="visible-phone hidden-tablet hidden-desktop">myIconLabel</span>
</span>
The class visible-phone hidden-tablet hidden-desktop will show it on phone (collapsed menu), but not on tablet or desktop.