Menu
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"><a href="#">home</a></li>
<li><a href="#">ask a question!</a></li>
<li><a href="#">learn</a></li>
<li><a href="#">contact</a></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"><a href="#">home</a></li>
<li><a href="#">ask a question!</a></li>
<li><a href="learn.html">learn</a></li>
<li><a href="#">contact</a></li>
</ul>
<style>
.navbar{
background:transparent;
}
</style>
</div>
</nav>
962
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">
<a href="#" class="navbar-brand">Brand</a>
<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><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
<a href="#">Link</a>
</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
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
