Please pardon my ignorance, I am new to bootstrap. I have this code that I need to correct, and I can't figure out why the menu is not pushing the rest of the content down on click. Here are the HTML and CSS Code snippets
*:before,
*:after {
box-sizing: border-box;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 8px;
padding: 9px 10px;
position: relative;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button" aria-expanded="true">
<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="#" class="navbar-brand">
<img alt="Harbor Real Estate" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" aria-expanded="true" style="">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Buy
</li>
<li>Rent
</li>
<li>Landlords
</li>
<li>Property Management
</li>
</ul>
</div>
<!-- /navbar-collapse -->
</div>
<!-- /container-fluid -->
</nav>
</div>
</div>
I had similar problem and found that it was due to setting a fixed height to the header tag which contains my navbar.
I fixed it by placing that particular CSS in a media query so it only applied to larger screens.
I think it does push your content downwards see my example below.
I've changed the code in your question into a code snippet and added jQuery and Bootstrap's CSS and JavaScript. As the collapsing behaviour of the navbar is dependent on jQuery and Bootstrap's JavaScript perhaps that was missing.
Two additional things:
I've removed the class in from the <div id="bs-example-navbar-collapse-1" ... to make the navbar be collapsed by default
I've removed the outer .row and .col-md-12 as they aren't needed
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button" aria-expanded="true">
<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="#" class="navbar-brand">
<img alt="Harbor Real Estate" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse" aria-expanded="true" style="">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Buy
</li>
<li>Rent
</li>
<li>Landlords
</li>
<li>Property Management
</li>
</ul>
</div>
<!-- /navbar-collapse -->
</div>
<!-- /container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">Content</div>
</div>
</div>
Muhammad Hasham. Try this! Works.
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-md-12">
<nav role="navigation" class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button" aria-expanded="true">
<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="#" class="navbar-brand">
<img alt="Harbor Real Estate" src="img/logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse" aria-expanded="true">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Buy
</li>
<li>Rent
</li>
<li>Landlords
</li>
<li>Property Management
</li>
</ul>
</div>
<!-- /navbar-collapse -->
</div>
<!-- /container-fluid -->
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
You can add main j-query.
jquery-1.11.1.min.js
In Your code to work this menu
Related
I am using bootstrap 3.4.1 and I am having and issue with the navbar on phone (e.g. S9 )
The menu icon ends up going to new line. So I did col-xs-11 and col-xs-1 but still doesn't work. Here is the code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<!-- THE MENU -->
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-11 col-xs-11">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Hammad Muhammad Mehmood</a>
</div>
<div id="main-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>Leetcode</li>
<li>About</li>
<li><span class="fa fa-github"></span>
</li>
</ul>
</div>
</div>
<!-- THE ICON -->
<div class="col-sm-1 col-xs-1">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" 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>
</div>
</div>
</div>
</nav>
I have added this into my css so at least it shows in the new line , but it broke for other mobiles then. I don't know how to get it in the same line. Any help will be greatly appreciated:
.col-xs-1 {
width: 25%;
}
Firstly ditch the column constructs inside the bootstrap navbar. It was never intended for .row and .col- usage.
Because your .navbar-brand content is oversized for the S9 or any mobile device, it breaks the bootstrap mobile nav. Bootstrap 3 does not account for such oversized brand content. This is why flex is awesome in bootstrap 4.
Anyway with a few css tweeks (hacks) we can get the .navbar-brand content to break onto the next line, rather than the .navbar-toggle icon going to the next line.
See responsive example here... https://jsfiddle.net/joshmoto/k8c9uj7q/
.navbar-toggle {
position: absolute;
right: 0;
}
#media (max-width: 786px) {
.navbar-brand {
padding-right: 60px;
height: auto;
}
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Hammad Muhammad Mehmood</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" 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>
</div>
<div id="main-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Leetcode</li>
<li>About</li>
<li><span class="fa fa-github"></span>
</li>
</ul>
</div>
</div>
</nav>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
i want to add a logo to the right side of the bootstrap navbar. Added it using navbar-right class. but it doesn't resize within the size of the navbar. So added some css but now it is displayed in the left side after external css. Also is there a way to increase the height of the navbar without losing responsiveness? code is as follows.
#logofpin {
max-width: 5%;
max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
</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">Home<span class="sr-only">(current)</span></li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Risk Engine</li>
<li>Analytics</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<img alt="Forestpin logo" src="assets/images/logofpin.png" id="logofpin">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Try adding pull-left and pull-right css and form html as like below snippet.
.log-img {
max-height: 100%;
}
.p0 {
padding: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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 pull-left" 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>
<img src="https://www.w3schools.com/cssref/w3css.gif" class="img-responsive log-img">
</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">Home<span class="sr-only">(current)</span></li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Risk Engine</li>
<li>Analytics</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The brand is centered until i change it to an img.
I have tried many different ways of fixing it in css, but it wont work.
How can i vertically align this logo? and why doesnt my css work? For some reason, not all of my css styles are being applied.
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<img id="logo" alt="Brand" src="images/logo.jpg" width="40px" height="40px">
</a>
</div>
<div>
<div class="container" id="mynav">
<!-- 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>
</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">Link <span class="sr-only">(current)</span></li>
<li>Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
css:
#mynav
{
width: 80%;
}
#logo
{
width:50px;
height: 50px;
vertical-align: middle;
}
You should only need one .navbar-header div, just place the .navbar-brand into your standard .navbar-header and adjust the padding for the .navbar-brand class.
.navbar .navbar-brand {
padding-top: 5px;
}
Working Example:
.navbar .navbar-brand {
padding-top: 5px;
}
.navbar .navbar-brand img {
height: 40px;
width: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">
<img alt="Brand" src="https://unsplash.it/40/40/?random">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
On this bootstrap starter template:
when the browser gets narrow the navigation bar links/buttons collapse into one icon in top-right corner like this:
I would like to have this collapsed "icon" as default like on the picture above. So that the navbar links are available after the user clicks that top-right collapsed button.
How to do that?
This is the source code of the template:
<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 name</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>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
It's all in the CSS.
See this post and check out the css column.
Always Collapse Bootstrap Nav
Working Example:
.navbar .navbar-header {
float: none;
}
.navbar .navbar-toggle {
display: block;
}
.navbar .navbar-collapse.collapse {
display: none!important;
}
.navbar .navbar-nav {
float: none!important;
}
.navbar .navbar-nav > li {
float: none;
}
.navbar .navbar-collapse.collapse.in {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
I'm having some issues with my Navbar. It collapses on <768px but from 768 onwards it will do this stupid thing until it can fill the page properly:
I have tried entering nav-justified to the HTML but it just stacks each button.
Ideally I'm looking for any solution that doesn't look stupid, but unfortunately I need to leave every single link on this menu so even culling some isn't an option.
I think best bet would be to have it all center align so that if it has to stack it is at least in the middle.
Anyone else had this issue before?
Here are a few ways to solve this problem.
1) Reduce the font size
2) Utilize dropdown menus.
3) Add another (permanently exposed) bar for frequent/common links.
See working example.
.navbar.navbar-custom,
.navbar.navbar-custom2,
.navbar.navbar-custom3 {
background: white;
border-radius: 0;
border: none;
border-bottom: 3px solid red;
}
/**NAV One**/
.navbar.navbar-custom .navbar-nav > li > a {
font-size: 12px;
}
/**NAV Three**/
.navbar-default.nav-top {
background: white;
border-top: 3px solid red;
}
.navbar-default.nav-top ul {
display: inline-block;
float: right;
}
.navbar-default .navbar-top li {
float: left;
font-size: 12px;
}
.navbar-default .navbar-top li a {
color: #555;
}
<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-default navbar-custom">
<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-nv1" 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="#">NAV 1</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nv1">
<ul class="nav navbar-nav">
<li>HOME
</li>
<li>TRAINING
</li>
<li>HEALTH
</li>
<li>SAFETY
</li>
<li>TRAINING CALENDAR
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-info">NAV One + Smaller Text</div>
<nav class="navbar navbar-default navbar-custom2">
<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-nv2" 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="#">NAV 2</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nv2">
<ul class="nav navbar-nav">
<li>HOME
</li>
<li>TRAINING CALENDAR
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
<li class="dropdown"> SERVICES <span class="caret"></span>
<ul class="dropdown-menu">
<li>TRAINING
</li>
<li>HEALTH
</li>
<li>SAFETY
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-danger">NAV Two + Dropdown</div>
<nav class="navbar-default nav-top">
<div class="container-fluid">
<ul class="nav navbar-top">
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default navbar-custom3">
<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-nv3" 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="#">NAV 3</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nv3">
<ul class="nav navbar-nav">
<li>HOME
</li>
<li>TRAINING
</li>
<li>HEALTH
</li>
<li>SAFETY
</li>
<li>TRAINING CALENDAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-warning">NAV Three + Upper Links</div>
Would it be as simple as changing the #media queries higher like maybe around 800-900? Then change it to dropdown menu as suggested by vanburenx?