Menu
Something like this website
This is what I am trying to achieve:
I have done a lot of research on this but nothing helped. I have tried affix plugin and jQuery but found them to be very confusing. I am new to jQuery and find it a little difficult to understand and implement :(
html, body {
margin:0;
padding:0;
}
body {
position:relative;
height:200px;
}
.nav {
margin:0px;
}
.navbar{
background:transparent;
background-color:transparent;
border-color:transparent;
margin-bottom:0px;
font-family: 'Droid Serif', serif;
font-size:20px;
}
.navbar-brand {
font-size:20px;
font-family: 'Droid Serif', serif;
}
header {
text-align: center;
color: #fff;
background-attachment: scroll;
background-image: url("work.jpg");
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro-text .intro-heading {
margin-bottom: 25px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 50px;
}
@media(min-width:768px) {
header .intro-text {
padding-top: 300px;
padding-bottom: 200px;
}
header .intro-text .intro-heading {
margin-bottom: 50px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 75px;
font-weight: 700;
line-height: 75px;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<!-- Custom CSS -->
<link href="css.css" rel="stylesheet" type='text/css'>
<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header" role="navigation">
<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="#">Website</a>
</div> <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li ><a href="#">Home</a></li>
<li ><a href="#about">About</a></li>
<li ><a href="#services">Services</a></li>
<li ><a href="#contact">Contact</a></li>
</ul>
</div> <!--ul-li-->
</div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Header-->
<header>
<div class="container" >
<div class="intro-text">
<!--<div class="intro-lead-in">Welcome To Our Studio!</div>-->
<div class="intro-heading">You have landed our page!</div>
<a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
</div>
</div>
</header>
<!--Header-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
</body>
</html>
638
. navbar-fixed-top--scrolled changes the nav bar background color. It's added to the nav bar when the content div is no longer 100% visible as we scroll down.
You aren't wrapping your container divdivThe HTML division tag, called "div" for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content.https://www.freecodecamp.org › news › html-div-what-is-a-di...HTML Div – What is a Div Tag and How to Style it with CSS around anything. You also don't have any content to display on the page inside any of your elements within nav. You have an unnecessary closing div within your nav. Also in your css code your navbar-header needs a dot instead of a # in front of it.
You need to do three things to make a navigation bar transparent. Set background image to non-nil empty image ( UIImage() ). Set shadow image to non-nil empty image ( UIImage() ). Set isTranslucent to true .
Here you go:
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', 'red');
} else {
$('.navbar').css('background', 'transparent');
}
});
Working Demo
78
You can add or remove a .transparent class to the nav according to the position of scrollbar.
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('transparent');
} else {
$('nav').removeClass('transparent');
}
});
and CSS:
nav.navbar{
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
nav.navbar-inverse {
background-color: #222;
border-color: #080808;
}
nav.navbar.transparent {
background-color:rgba(0,0,0,0);
}
Here is the solution with your code: http://jsfiddle.net/m7yww8oa/157/
37
When $(window).scroll check if $(window).scrollTop() greater than 50px. If so, add class .trans and remove it if doesn't.
Add the style
.navbar.trans {
background:transparent !important;
}
To your css.
Your working code:
$(window).scroll(function() {
var offset = $(window).scrollTop();
console.log(offset);
$('.navbar').toggleClass('trans', offset > 50);
});html, body {
margin:0;
padding:0;
}
body {
position:relative;
height:200px;
}
.nav {
margin:0px;
}
.navbar{
background:transparent;
background-color:transparent;
border-color:transparent;
margin-bottom:0px;
font-family: 'Droid Serif', serif;
font-size:20px;
}
.navbar-brand {
font-size:20px;
font-family: 'Droid Serif', serif;
}
header {
text-align: center;
color: #fff;
background-attachment: scroll;
background-image: url("work.jpg");
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .intro-text {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro-text .intro-heading {
margin-bottom: 25px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 50px;
font-weight: 700;
line-height: 50px;
}
@media(min-width:768px) {
header .intro-text {
padding-top: 300px;
padding-bottom: 200px;
}
header .intro-text .intro-heading {
margin-bottom: 50px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 75px;
font-weight: 700;
line-height: 75px;
}
}
.navbar.trans {
background:transparent !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<!-- Custom CSS -->
<link href="css.css" rel="stylesheet" type='text/css'>
<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!--Navigation-->
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="conatiner-fluid">
<!--page scroll button for -->
<div class="navbar-header" role="navigation">
<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="#">Website</a>
</div> <!--page scroll button-->
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li ><a href="#">Home</a></li>
<li ><a href="#about">About</a></li>
<li ><a href="#services">Services</a></li>
<li ><a href="#contact">Contact</a></li>
</ul>
</div> <!--ul-li-->
</div> <!--navbar collapse-->
</div> <!--container-fluid-->
</nav>
<!--Navigation-->
<!--Header-->
<header>
<div class="container" >
<div class="intro-text">
<!--<div class="intro-lead-in">Welcome To Our Studio!</div>-->
<div class="intro-heading">You have landed our page!</div>
<a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
</div>
</div>
</header>
<!--Header-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
</body>
</html>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
