I am new to bootstrap.
This is the design I am trying to make:
As you can see the navbar is on top op the background image.
This is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<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.4/css/bootstrap.min.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.4/js/bootstrap.min.js"></script>
<style>
<style>
.navbar-default {
background: none;
border: none;
}
body{
height:100%;
}
html{
background: url('sun.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: 0 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
</div>
</nav>
</body>
</html>
gives:
I don't know how to put it on the image itself instead of above.
short sidequestion: what makes it that the picture from vimeo makes it look so much better than the image I use from the sun? on my image you can see all the pixels etc... Is this due to the fact that it might be a too small image and that it has to be stretched a lot to fit the whole page?
EDIT:
this is what I tried but didn't work
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
<style>
.navbar{
background:transparent;
}
</style>
</div>
</nav>
Bootstrap 4
The Navbar has no background color, so it's transparent by default. Just remember to use navbar-light or navbar-dark so the link colors work with the contrast of the background image. Display of the toggler is also based on navbar-(dark or light).
https://www.codeply.com/go/FTDyj4KZlQ
<nav class="navbar navbar-expand-sm fixed-top navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap 3
Use navbar-fixed-top and then change the CSS to make it transparent. Here's an example of a custom transparent navbar.
http://www.codeply.com/go/JNy8BtYSem
<nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
<div class="container">
<div class="navbar-header">
Brand
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
Link
</li>
</ul>
</div>
</div>
</nav>
This question is only to make the transparent Navbar. To change style after scrolling or at some Navbar position see: Animate/Shrink NavBar on scroll using Bootstrap 4
You need to remove the background from your nav-bar:
.navbar-default {
background: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
background: red;
}
.navbar-default {
background: none;
border: none;
}
</style>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Just take the backgound image in Body and then use this code
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Username</li>
</ul>
</div>
</div>
</div>
<div class="wide">
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
<div class="container">
<div class="text-center">
<h1>Content</h1>
</div>
</div>
Also used styling style="opacity:0.6;" in Navbar div
The background colour is set on the .navbar-default class so make sure your css is using that class to target turning the bar transparent. e.g.
.navbar-default{background-color: transparent;}
As Turnip states, this needs to be applied after the bootstrap styles in your <head>
If you really want to force it whilst you are getting it to work add the following attribute to your <nav> element
style="background-color: transparent;"
So your nav element looks like this:
<nav class="navbar navbar-default" style="background-color: transparent;">
However, it obviously better to have this within a CSS file, rather than as inline HTML
.navbar{
background:transparent;
}
This will make your background transparent.
Related
I am trying to make navbar elements appear on same line. I tried overriding .nav class display to inline:block. but it is not working at all. Please help me fix this problem. This is working on bootstrap 3
HTML
<head>
<title>Samrat Luitel website design </title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav">
<div class="container-fluid topnav">
<div class="navbar-header">
<a class="navbar-brand topnav" href="#" target="_blank">Samrat Luitel</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
CSS
body{
font-family:"Lato";
font-weight:700;
}
.navbar-brand{
color:black;
}
.nav {
display: inline-block;
}
You can use this
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" />
<head>
<title>Samrat Luitel website design </title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top">
<div class="container topnav">
<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="#">Samrat Luitel</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
</body>
Pls add inline-block style to your li, so that you can manage your list items.
.nav li{
display:inline-block;
}
You need to put this css .nav > li {display: inline}
Update your css with below css. Remove display:inline-block; from .nav css rule.
.nav {
float: left;
width: 100%;
}
.nav li {
display: inline-block;
padding: 0 10px;
}
Its difficult to understand the exact problem but i guess if inline is not working try float
.nav > li {float:left:width:30%;}
/* New edit */
Try this one
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
I had the same problem and the suggested solutions with adding something like "... display: inline ..." to my stlyes.css file also did not help me (I also use Bootstrap4).
This is what finally helped me
<nav class="navbar navbar-default navbar-expand-sm">
...
</nav>
The important point here is navbar-expand-sm. This says that the nav-bar-items are only stacked vertically when the screen size is smaller or equal to small.
See further explanation here https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
li {
float:left;
}
ul {
list-style-type:none;
}
So today I have been learning how to use Bootstrap(I'm very new) and I have come across a bit of a problem. This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</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>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
</body>
</html>
and basically everything is fine however, if you view my code as .html or whatever in a browser, you will see that under the navigation menu at the top which is black, there is the jumbotron which is fine however, the background of it is black which I don't want, I want it to be white like the rest of the page. I'm so new to this so I can't even manage to figure out how to do this so any help would be highley appreciated. Sorry, I've tried to be as specific as I can but I really am new to this and I'm hoping someone can help me.
TH.
Get
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
outside of
nav tags
You do not have to make any changes in CSS
You can use css for the navbar color but still I am confused what actually you want:
.navbar-inverse .navbar-toggle {
background-color: #efefef;
}
.navbar-inverse .navbar-toggle:hover {
background-color: #efefef;
}
JSfiddle for the same
Put the container div outside the nav.
Here:
<!DOCTYPE html>
<html>
<head>
<title>Home</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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</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">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
</body>
</html>
Hope i understood you right. If you DONT want to change any html markup you just need to change the color by adding a custom css class to the desired elements and override what boostrap does:
<nav class="navbar navbar-inverse myJumbotronColor">
<div class="container-fluid myNavBarColor">
<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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</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>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
And the custom css:
.myNavBarColor {
background-color: rgb(34, 34, 34);
border-color: rgb(8, 8, 8);
}
.myJumbotronColor {
background-color: #fff;
border: none;
}
https://jsfiddle.net/6gnp4doL/
Please note that you have a markup error in your html:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<!-- these two tag should not be here
</ul>
</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>
You can seek which element has the actual background.
Than go to your CSS file ( assuming you made one ) and set the background color to white.
Let's assume the nav-bar header class has the background color to it
Add this to your CSS file
.nav-bar
{
background-color: white !imporant;
}
The !important is to override any other style sheet lines written to adjust the property on the element.
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Blog</li>
<li class = "dropdown">
Social Media<b class= "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
</div>
This is the result:
How to place the collapsing navbar in a new line?
Edit:
I want to display my navigation bar in a new line as in following picture.
Try the sample of code for Collapsible Navigation Bar to be appeared in a new row.
.heading {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
<!DOCTYPE html>
<html>
<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.5/css/bootstrap.min.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>
<div class="row">
<div class="col-sm-12 heading">
<h1>Heading goes here</h1>
</div>
</div>
<div class="row">
<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>
</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</a></li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
Here is the sample PEN, hope this will be helpful to you.
Here is the working fiddle I set up
<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-right">
<li>Home</li>
<li>Blog</li>
<li class = "dropdown">
Social Media<b class= "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is the result:
What is going on is that your class navHeaderCollapse is probably effecting on your code.
Please post your current CSS class so we can take a look at it.
Good luck!
I've made a website using bootstrap, I don't know much about this framework. What I'm having difficulty with is styling the navbar.
What I would like to do is move the name, and three titles, 'work', 'about', and 'contact', to the left corner of the page, and move the social media icons, to the right corner of the page. Could someone instruct me on how I could do this while still retaining the functions that bootstrap offers?
Here is a jsfiddle: https://jsfiddle.net/3kq7ptxd/
The jsfiddle looks different from the actual website, so if you go on paulopinzon.com you will maybe get a clearer idea of what I'm attempting.
Thanks for taking the time! I will try to experiment with things in the mean time, but if someone with more experience could help that would be much appreciated.
Have a good day
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<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> Paulo Pinzon-Iradian
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
</li>
<li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
</li>
<li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Change the navbar .container to .container-fluid.
Basically .container-fluid continuously re-sizes on change of viewport and leaves no extra empty space on the sides ever, unlike .container.
.container-fluid has the CSS property width: 100%;, so it continually readjusts at every screen width granularity.
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<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> Paulo Pinzon-Iradian
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
</li>
<li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
</li>
<li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
</li>
</ul>
</div>
</div>
</nav>
CODEPEN DEMO
Try to add following code to your css styles, did it what you wanted to?
nav .container {
margin: 0 auto;
width: 100%;
}
from
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
to
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
I am trying to make a navbar like seen on: http://getbootstrap.com/examples/navbar/
I have the code below:
<head>
<meta charset='UTF-8' />
<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
</head>
<body class='container'>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="navbar-header">
<a class="navbar-brand" href="#">BLARG</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">TEST</li>
</ul>
</div>
</nav>
<title>Splatter</title>
<div class="page-header">
<h1><%= #title %></h1>
</div>
<%= yield %>
But I get something like this:
Any ideas what I am totally messing up
You were referencing Bootstrap v2 stylesheet in your head for v3 code and then had to clean the HTML markup.
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' />
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
Blarg
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li>Test
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</body>
using
<nav class="navbar bg-transparent ...">...</nav>
works and then working with other css classes to fully adapt the look you want . Here is a cheat sheet to help you get started cheat sheet inside the cheat sheet is a list of css classes. The code above works fully for making the navbar work the way you want just add the css class
bg-transparent
to any of the following elements to make them transparent. So adding the following works
<nav class="navbar bg-transparent navbar-inverse navbar-fixed-top" >
<div class="navbar-header">
<a class="navbar-brand" href="#">BLARG</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">TEST</li>
</ul>
</div>
</nav>
will make the navbar fully transparent :)
Usually when I see a Bootstrap component in the documentation, and I want to replicate it, I just do CTRL+U in Chrome (or whatever shortcut you have for source viewing in your browser) and copy the code and paste it in my favorite editor and then I have that component. In your case, the mark up would be:
<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="#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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Note that the nav element is wrapped in a container element, that's what you don't want to be doing really. I'd rather just leave nav as a direct child of body.
JS Fiddle