this is my problem:
collapse problem
As You can see my navbar-collapse div enters navbar area. Could You please help me fix it?
<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 navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#page-top">Title</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#dropdown">
Menu
</button>
<div class="collapse navbar-collapse" id="dropdown">
<ul class="nav navbar-nav navbar-right">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
</div>
</nav>
Issue is about you missed to add navbar-header container which helps to segregate header and submenus. Hope it helps
<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 navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#page-top">Title</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#dropdown">
Menu
</button></div>
<div class="collapse navbar-collapse" id="dropdown">
<ul class="nav navbar-nav navbar-right">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
</div>
</nav>
add class .m-top-55 in div id="dropdown" which work on small layout
#media only screen and (min-width: 600px) {
/* For tablets: */
.m-top-55{
margin-top:55px;
}
}
This will solve Your problem.
Related
I am making a portfolio site on codepen.io and my navbar collapse button won't work went the window size is decreased. Codepen: https://codepen.io/RayFitzgerald/full/vKgYoj/ Apologies for poorly written code. I am new.
HTML
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Ray Fitzgerald
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">button
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfollio</li>
<li>Social</li>
</ul>
</div>
</div>
</nav>
<!-- Main Body & Text Items -->
<div class="container">
<div class="jumbotron">
<div class="intro-text" id="About">
My name is Ray Fitzgerald and I am a young Programmer and Web Developer
</div>
<div class="intro-text" id="Portfolio">
Portfolio
</div>
<div class="intro-text" id="Social">
Social
</div>
</div>
</div>
</body>
CSS
body{
padding-top: 50px;
}
.intro-text{
font-size: 30px;
}
#About{
height: 500px;
}
#Portfolio{
height: 500px;
}
#Social{
height: 500px;
}
No bootstrap.min.js and no JQuery library found in the link provided by you.
Add JQuery library then add bootstrap.min.js it will work.
Bootstrap navbar toggle component works only when Bootstrap Javascript is included in the code. Include bootstrap javascript file and it works like charm.
Reminder: Bootstrap JS works only if you include jQuery first.
Try this code as it is in application this code works me at my end
<!DOCTYPE html>
<html lang="en">
<head>
<title></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.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>
<a class="navbar-brand" href="#">Sitename</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 sub</li>
<li>Page sub</li>
<li>Page sub</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>
</div>
</body>
</html>
For some reason, my dropdown in my navigation bar is not working; nothing happens when it is clicked. I also find it strange because I copied this code from somewhere else, and it isn't working. I have checked for typos multiple times but came up with nothing.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website Template</title>
<!-- links to the css page and bootstrap -->
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- BEGIN NAVBAR -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li><a class="" href="#">Text</a></li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li class="dropdown">
Dropdown <b class="caret"></b> <ul class="dropdown-menu">
<li>Text</li>
<li class="divider"></li>
<li class="dropdown-header">Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="jumbotron">
<div class="container">
<h1>Text</h1>
<p>Paragraph.</p>
</div>
</div>
</body>
</html>
My CSS:
.jumbotron {
text-align: center;
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
You're not referencing the jQuery library and Bootstrap.js library in your <head> tag..
The navbar requires a javascript library (collapse.js), all you need is here, check the text in the big red box.
EDIT: Put this CDN tag in your <head>, make sure to put the latest jQuery library before this line.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
I would like to have a Navbar in Bootstrap that looks like
+---------------------------------------------------+
| press | login | ... | <-second nav with smaller
+---------------------------------------------------+ height, text, ...
| LO | | | | |
| GO | HOME | FOO | BAR | | <-main menu with normal
+---------------------------------------------------+ height and text
Is there something like navbar-small in Bootstrap? Has someone any other hints how to do this with Bootstrap?
Here is my HTML markup:
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press</li>
<li>login</li>
<li>...</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME<span class="sr-only">(current)</span></li>
<li>FOO</li>
<li>BAR</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I want to have #second-nav smaller.
In your top navbar, the padding on the anchor elements is increasing the height. You can remove it using the following code. Output in Full screen.
#media (min-width: 768px) {
#second-nav li a {
padding: 0 15px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press
</li>
<li>login
</li>
<li>...
</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Beratungsansatz<span class="sr-only">(current)</span>
</li>
<li>HOME
</li>
<li>FOO
</li>
<li>BAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here is what I have in one of my application to adjust both the size of the font and the height of the navbar
.navbar-nav {
font-size: 15px;
line-height: 1.428;
}
You can adjust depending on what you mean by "small" and "normal"
Depending on how you structured the nav bar in your template/views you just call the class in the appropriate tag. This is an example with a ul list tag
<ul class="nav navbar-nav">
<!-- your links -->
</ul>
This is what you need dude
#second-nav li a {
padding: 0 15px;
}
#second-nav ul li {
display: inline;
list-style: none;
float: left;
}
div#second-nav {
float: right;
}
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div id="second-nav" class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li>press
</li>
<li>login
</li>
<li>...
</li>
</ul>
</div>
<!-- /.container-fluid -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Beratungsansatz<span class="sr-only">(current)</span>
</li>
<li>HOME
</li>
<li>FOO
</li>
<li>BAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
DEMO
I know you have an answer but this might be helpful anyways and takes the mobile viewport into consideration.
.navbar-default.nav-top ul {
display: inline-block;
float: right;
}
.navbar-default ul.navbar-top li {
float: left;
font-size: 11px;
}
<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-default nav-top">
<div class="container-fluid">
<ul class="nav navbar-top">
<li>press
</li>
<li>login
</li>
<li>.....
</li>
</ul>
</div>
</nav>
<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="#">
<img src="http://placehold.it/50x25/f00/f00">
</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">Home <span class="sr-only">(current)</span>
</li>
<li>Foo
</li>
<li>Bar
</li>
</ul>
</div>
</div>
</nav>
I changed my navbar min-height from 40 to 55 to use a logo.
.navbar{
position:relative;
min-height:55px
}
I want to know how to change the height of my navbar buttons:
<div 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=".navbar-collapse">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://holdirbootstrap.de/examples/navbar-fixed-top/#"> <img src="images/logoverysmall.png">Company</a>
</div
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Über uns</li>
<li>Product</li>
<li class="dropdown">
0<b class="caret"></b>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Here the full working Code, If you want to change the height change in the test1 or test2 css alone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<style type="text/css">
.bs-example{
margin: 20px;
}
.test1
{
height:20px !important;
min-height:40px !important;
}
.test2
{
height:20px !important;
padding-top:10px !important;
min-height:20px !important;
}
</style>
</head>
<body>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-inverse test1">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header test1">
<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>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse test1">
<ul class="nav navbar-nav">
<li class="active test1">Home</li>
<li class="test1">Profile</li>
<li class="test1">Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Normally, In bootstrap they have already set navbar height. So if you want to modify the height use below code
.navbar
{
position:relative;
height:55px !important;
}
Where you are writing a style for particular navbar add '!important' to all element because in runtime it will take only runtime css. So use '!important' word.
Using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
div[class^='span'] {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<ul class="nav pull-right nav-collapse collapse">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="containter-fluid">
<div class="row-fluid">
<div class="span12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row-fluid">
<div class="span2">2</div>
<div class="span10">10</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I get the following:
Yet, in the example on the Bootstrap site, all of its collapsed links form a vertical list. Any ideas on what I'm doing wrong?
EDIT: Taking .pull-right out of the nav <ul> and replacing it with <div class="span8"> solved some of it. Unfortunately, it looks like my .brand element is causing some issues.
If I shrink my browser to the point where the collapsable nav button is next to my .brand, the links below don't form a list:
If I shrink the browser so the links form a list, then the button pops below the .brand:
Is there a way to keep the button on the same line as the .brand and force the links below to form a vertical list?
From the looks of your code, you are missing a very important piece of code in there.
You need to link bootstrap-responsive.css or bootstrap-responsive.min.css
Additionally, this is what your menu should look like:
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Bootstrap Test</a>
<div class="pull-right nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
You must be using inline-block or float:left.
If so then remove float and use display:block