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.
Related
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>
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">
This is the example for a Bootstrap 3 collapsible navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<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>
<p class="navbar-text visible-xs-inline-block">Text Here</p>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
I want to change:
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
to my own hamburger-icon like this:
<span class="hamburger-menu"></span>
I want the hamburger-menu icon to look exactly like the other glyphicons bootstrap 3 normally uses (I beleave they use the halfling set and that they are 14x14 pixels, but I might be wrong about this...).
I also want to add an envelope glyphicon + a badge (telling the user how many unread messages he/she has) in the right part of the navbar, same as the hamburger-menu but to the left of the hamburger-menu icon and get it all to line up vertically.
I've tried the solution here: How to add text to bootstrap mobile menu but the text is added in the left part of the navbar, next to the brand. Also if I add glypicon and badge to it they look odd (not vertically aligned).
I have also not been able to figure out how to change the 3x icon-bars to my own hamburger. I have made my own icon (14x14pixels) and store it locally. I also have a custom.css that will add/overvrite the Bootstrap css. However I can't figure out what classes to manipulate and how.
Someone please help?
You can remove the spans:
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
and add your icon directly to the button class like so,
<button type="button" class="navbar-toggle hamburger-menu" data-toggle="collapse" data-target="#myNavbar">
</button>
With Bootstrap 3 navigation bar, I want to display Google place options on an input text field. Following is the screen shot for same:
As can be seen from screen shots, when navbar is fixed, options are displayed at the back. And, when navbar is static, options are displayed as expected. I want the options to be displayed properly when navbar is fixed.
I tried to point the code on bootply but, it's not working. Working code at JSFiddle. Also, code is as under:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
</head>
<body style="min-height: 2000px;">
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li class="dropdown">
Find <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" name="search" style="width: 20em;" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
<script>
window.onload = function() {
var options = {
types: ['geocode']
};
var inputField;
inputField = document.getElementsByName( 'search' )[0];
new google.maps.places.Autocomplete( inputField, options );
};
</script>
Please help.
Thanks much in advance!
This is because of the z-index of your elements. Try changing the z-index of .pac-container. Example: .pac-container { z-index: 9999; }.
I have logo on left side of navbar and menu button on right side I want to change navbar orientation such that logo come to the right side and button for menu on left side my code is,
<nav class="navbar navbar-inverse navbar-default">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="./Styles/img/seha1.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</div>
</div>
</nav>
I tried one thing to use style navbar pull right on the outer side of this nav tag. and on button navbar pull left it work but result in increase the width of the navbar
Hopes for your suggestions
thanks
You was right, the solution mentioned in the next link do not work for Bootstrap 3:
How to implement RTL bootstrap 4 navbar?
However, I manage to solve your problem using a custom class named navbar-rtl that will customize the CSS style of the navbar for give it a RTL appearance. I hope this can help you:
#media(min-width:768px) {
.navbar-rtl .navbar-header {
float: right;
}
}
.navbar-rtl .navbar-brand {
float: right;
}
.navbar-rtl .navbar-toggle {
float: left;
}
.navbar-rtl .navbar-nav {
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-default navbar-rtl">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
Navbar
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</div>
</div>
</nav>