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.
Related
I'm having a lot of trouble adding a fixed black background to my bootstrapped navbar. In my CSS, I declared the background-color as black, but it doesn't seem to change anything. My own CSS is declared after bootstrap's core CSS, so it wouldn't be overridden by a default color. The nav bar shows as transparent, with opaque lettering. Not sure what the problem is, especially since I already declared the color of the navbar!
Here is the HTML for the navbar:
<div class="jumbotron">
<div class="container">
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav
And here is my CSS. Please help. I am going insane.
.jumbotron navbar-fixed-top container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
change your css from .jumbotron navbar-fixed-top container to .jumbotron .navbar-fixed-top.container I updated your code check here
.jumbotron .navbar-fixed-top.container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar-inverse jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<div class="navbar-header">
<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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I think this is exactly what you need
<head>
<link rel="stylesheet" href="farji.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class=" jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home <span class="sr-only">(current)</span></li>>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
OPTIONAL--and if you want to change it even further with any other color use the following css:
.navbar-inverse {
background-color: #122c46;
border-color: #122c46;
}
The navigation bar contains the brand image between menu options. When in responsive mode, resizing the menu options appear above the image logo.
I think that an option will be to convert it to toggle navigation-bar. Is there any another option?
The code:
<div class="container">
<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="#navbar9">
<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 class="brand-centered">
<a class="navbar-brand" href="index.html"><img style="margin-right: 10px; padding: 0;" src="https://www.w3schools.com/images/w3schools_green.jpg"/></a>
</div>
<div id="navbar9" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>MENU OPTION EXAMPLE</li>
<li>MENU OPTION EXAMPLE</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>MENU OPTION EXAMPLE</li>
<li>MENU OPTION EXAMPLE</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
The css:
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: auto;
padding: 0px;
width: 60px;
}
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.brand-centered .navbar-brand {
display: flex;
align-items: center;
}
.navbar-toggle {
z-index: 1;
}
https://jsfiddle.net/dcodesys/5zLt9e5b/
You should try this one. I'm not sure if this is what you expected.
Let me know later if this meets your expectation.
The logo & menu positions on navbar :
Small device (smartphone and tablet) => logo on the left side & menu on the toggle-collapsed bar.
Large device (desktop) => logo on the left side & menu on the right side
a.navbar-brand {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/pretty-office-part14-2/256/logo_yellow-32.png">
</a>
<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 navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
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>
The navbar doesn't align properly to the left and right-hand margin of my website. I am using Bootstrap's 'pull-left' & 'pull-right' functions.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microbiology Bootstrap!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Contact</li>
</ul>
<ul class="pull-right">
<li>By Industry</li>
<li>By Matrix</li>
<li>By Vial</li>
<li>All Studies</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Microbiology <br>Bootstrap</br></h1>
<p>Find the validation study you need. <br>Search by industry, matrix or vial.</br></p>
Learn More
</div>
</div>
CSS:
.nav {
background-color: #efefef;
}
.nav a {
color: #5a5a5a;
font-size: 12px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
Illustration:
Home | Contents By Industry | By Matrix | By Vials etc
Microbiology
Bootstrap
Any help would be greatly appreciated!
Since you are already loading bootstrap, you can achieve the same thing by using bootstrap's navigation. You will need two classes navbar-left and navbar-right on navbar's ul. Here is a sample code taken from bootstrap's documentation.
<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="#">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-left">
<li class="active">Link</li>
<li>Link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You will have to add classes accordingly to your code. Add navbar class to the div having class nav.
Use navbar-left , navbar-right instead of pull-left and pull-right
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