Every div on my page is overlapping each other. My site is running on bootstrap 3.3.7.
The site is displaying everything that is above the header on the top of the site (on navbar). There is also a image under navbar maybe that is the proble.
body {
min-height: 2000px;
}
/* Header */
.line-1 {
position: relative;
top: 50%;
width: 24em;
margin: 0 auto;
border-right: 2px solid rgba(255, 255, 255, .75);
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter {
animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinite normal;
}
#keyframes typewriter {
from {
width: 0;
}
to {
width: 19.2em;
}
}
#keyframes blinkTextCursor {
from {
border-right-color: rgba(255, 255, 255, .75);
}
to {
border-right-color: transparent;
}
}
header {
position: absolute;
width: 100%;
height: 100%;
color: white;
background: rgba(28, 36, 65, 0.93);
background: url('../img/head.png');
background-size: cover;
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
header .table {
display: table;
height: 100%;
}
header .container {
height: 100%;
}
header .header-text {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
header .typed {
display: inline-block;
margin: 0;
}
header .typed-cursor {
font-size: 60px;
display: inline-block;
margin: 0 10px;
color: #00a8ff;
-webkit-animation-name: flash;
animation-name: flash;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Navbar */
.navbar-default {
background-color: #242c43;
border-color: #242c43;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #0ca8fd;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav>li>a {
color: #ecf0f1;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #0ca8fd;
}
.navbar-default .navbar-nav>li>.dropdown-menu {
background-color: #242c43;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>a {
color: #ecf0f1;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li.divider {
background-color: #242c43;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
.navbar-default .navbar-toggle {
border-color: #242c43;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #242c43;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #0ca8fd;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #0ca8fd;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #0ca8fd;
background-color: #242c43;
}
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Olesandr Kapitula</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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 navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</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>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- End of navbar -->
<!-- Header image -->
<header>
<div class="container">
<div class="table">
<div class="header-text">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="light white line-1 anim-typewriter">HTML/CSS/JS/PHP WEBDEVELOPMENT</h3>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- End of header image -->
<!-- Panels -->
<section>
<div class="container">
<div class="row">
<p>text</p>
</div>
</div>
</section>
<!-- End of panels -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
RAW Paste Data
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Olesandr Kapitula</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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 navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</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>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- End of navbar -->
<!-- Header image -->
<header>
<div class="container">
<div class="table">
<div class="header-text">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="light white line-1 anim-typewriter">HTML/CSS/JS/PHP WEBDEVELOPMENT</h3>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- End of header image -->
<!-- Panels -->
<section>
<div class="container">
<div class="row">
<p>text</p>
</div>
</div>
</section>
<!-- End of panels -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Related
How to achieve that blur effect do not affect my buttons on navigation bar....
I want to blur only green color where i will add gradient effect and i want that my list on navigation bar (about, services, portfolio, pricing, contact) stay clear white color.
Please help me...
.navbar {
margin-bottom: 0;
background-color: #00A1A6;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
filter: blur (5px);
}
.navbar li a,
.navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #00A1A6 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="wrapper-parallax">
<nav 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="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li> CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
Try to use pseudo class :before for the background on .navbar class and then apply filter:blur(5px) to :before
.navbar.navbar-default:before {
content: "";
filter: blur(5px);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #00A1A6;
display: block;
}
Fiddle Link ▸
Stack Snippet
.navbar.navbar-default {
margin-bottom: 0;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
overflow: hidden;
}
.navbar.navbar-default:before {
content: "";
filter: blur(5px);
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
background: #00A1A6;
display: block;
z-index: -1;
}
.navbar li a,
.navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #00A1A6 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.navbar-nav li a {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper-parallax">
<nav 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="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li> CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
I am trying to edit the style of my bootstrap navigation bar. However, I am unable to edit color and remove borders, for example. I would like to just change the color to white and the border color to white as well I have included the code below. Can anyone tell me what I am doing wrong?
.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #292929;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffd4d4;
}
.navbar-default .navbar-text {
color: #292929;
}
.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffd4d4;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #292929;
}
.navbar-default .navbar-link {
color: #292929;
}
.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11px;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 90%;
width: auto;
}
.banner {
width: 100%;
/*background-color: #c3d7df;*/
}
.banner-inner {
max-width: 1100px;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title> My Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<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">
<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="http://jh.com"><img class= "logo" src="img/logo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> INSPIRATION</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <i class="fa fa-instagram"></i>
<li> <i class="fa fa-pinterest"></i>
<li> <i class="fa fa-facebook"></i>
<li> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
</body>
</html>
This is happening because your css is being overwritten by the default bootstrap css.
You need to make only one change. Use .navbar.navbar-default instead of just .navbar-default everywhere, this will give your css preference over the default css.
Here's a good article on css specificity : https://css-tricks.com/specifics-on-css-specificity/
.navbar.navbar-default {
background-color: #ffffff;
border-color: #ffffff;
}
.navbar.navbar-default .navbar-brand {
color: #292929;
}
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ffd4d4;
}
.navbar.navbar-default .navbar-text {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #ffd4d4;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
border:none;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.nav.navbar-nav > li.navbar-left {
font-family: 'Nunito Sans', sans-serif;
font-size: 11px;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 90%;
width: auto;
}
.banner {
width: 100%;
/*background-color: #c3d7df;*/
}
.banner-inner {
max-width: 1100px;
margin: 0 auto;
}
#media (min-width:768px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device=width, initial-scale=1.0">
<title> My Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container navbar-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">
<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="http://jh.com"><img class= "logo" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">TRAVEL</li>
<li class="navbar-left"> INSPIRATION</li>
<li class="navbar-left"> PORTFOLIO </li>
<li class="navbar-left"> ABOUT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <i class="fa fa-instagram"></i>
<li> <i class="fa fa-pinterest"></i>
<li> <i class="fa fa-facebook"></i>
<li> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!---End Header-->
<section class="banner">
<div class="banner-inner">
<img class="banner" src="img/background.png">
</div>
</section>
<!---End Banner-->
</body>
</html>
Checkout this Bootstrap Navbar Generator
http://bootstrap3-menu.codedorigin.com/
http://seegatesite.com/bootstrap/bootstrap-navbar-online-generator.php
When you click on the About tab, it will show a drop down. The elements of the dropdown have light blue background. Now, when you move your mouse away from About when the drop down is still active then the background is white. I want to change the white background to the light blue background. How can i achieve this? I appreciate your help. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Company Page</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">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/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>
<style>
.navbar {
margin-bottom: 0;
background-color: #B21A09;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.dropdown-menu {
background-color: #5A79A5;
}
.navbar-nav li a:hover, a:visited, .navbar-nav li.active a {
background-color: #5A79A5 !important;
}
.dropdown-menu li a:hover {
background-color: #9CAAC6 !important;
}
a:active.dropdown-toggle {
background-color: #5A79A5 !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default main">
<div class="container">
<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 navbar-right">
<li>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
With how your current CSS is laid out, try to use:
CSS
.open .dropdown-toggle{
background-color: #9CAAC6 !important;
}
HTML
<li class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
ABOUT
<span class="caret"></span>
</a>
</li>
Example from bootstrap docs
Usage of .open & .dropdown-toggle
This question has been answered before:
#Bimal Das
Try to override using the css below:
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background-color: #76cded !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Company Page</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">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/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>
<style>
.navbar {
margin-bottom: 0;
background-color: #B21A09;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.dropdown-menu {
background-color: #5A79A5;
}
.navbar-nav li a:hover, a:visited, .navbar-nav li.active a {
background-color: #5A79A5 !important;
}
.dropdown-menu li a:hover {
background-color: #9CAAC6 !important;
}
a:active.dropdown-toggle {
background-color: #5A79A5 !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default main">
<div class="container">
<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 navbar-right">
<li>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Typically you would use the anchor link state a:link which allows you to style a link that doesn't have a mouse over it. This would look something like this:
a:link{background-color: light-blue;}
However your code shows white being !important and can't be overwritten, so you should remove this styling before executing the above code.
Its a bootstrap agency landing page, The navigation bar functions properly in the desktop view and on the files that are kept offline.
But on the online version the navigation bar doesn't shrink when put into mobile view.
Link to the inline site.
This is how the navbar should work in mobile view
Navigation bar code:
.navbar-default .navbar-brand {
/*font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
color: #fed136;*/
}
.logo{
position:fixed;
/*size:10px;*/
width:160pt;
height:auto;
padding-top: 10px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color: #fec503;
}
.navbar-default .navbar-collapse {
border-color: rgba(255,255,255,.02);
}
.navbar-default .navbar-toggle {
order-color: #C51D1D;
background-color: #CA2222;
/*top: 31px;*/
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #CA2222;
}
/* Drop down */
#drop li ul li {
border-top: 0px;
}
/*Navigation text*/
.navbar-default .nav li a {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 100;
font-size:15px;
letter-spacing: 1px;
color: #fff;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
outline: 0;
color: #009DF7;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 0;
color: #fff;
background-color: rgba(255, 0, 0, 0.66);
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: rgba(255, 0, 0, 0.66);
padding-top: 15px;
}
#media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
background-color: transparent;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 3px;
}
/*navigation color*/
.navbar-default.navbar-shrink {
padding: 3px;
background-color: rgba(0, 0, 0, 0.57);
}
.navbar-default.navbar-shrink .navbar-brand {
font-size: 2em;
}
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<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 page-scroll" href="#page-top"><img class="logo" width="80%" src="img/logos/U2.png" style="
margin-top: -22px;
"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 0px;">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="">
<a class="page-scroll" href="#services">Tandem skydiving</a>
</li>
<li class="">
<a class="page-scroll" href="#learn">Learn to skydive</a>
</li>
<li class="">
<a class="page-scroll" href="#hubs">microlite and paragliding</a>
</li>
<li class="">
<a class="page-scroll" href="#book">BOOK NOW</a>
</li>
<li class="">
<a class="page-scroll" href="#socialmedia">About us</a>
</li>
<!--<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#contactus">connect</a>
</li>-->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Man you just use the Bootstrap CDN reference for online lookup. this Code is working with CDN connectivity. So please link CDN bootstrap css and script.
The problem on this page http://iloveskydiving.in/coco is that you are missing the meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
When looking at this page: http://sky.promile.co/coco/ (the "original" one, where the iframe pulls its content) it's working fine. You need to add the meta tag also to the code of the first page. (why using an iframe by the way?)
I'm trying to decrease the space between the links in my collapsed nav-bar. Could someone help me out please? I've looked around a fair bit, but I don't think I'm searching for the right thing.
Here is a screenshot and as you can see, the space between the 'links' is very big. How can I make it shorter please?
Thanks in advance!
Here is my code:
CSS:
.navbar-header {
background-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #666699;
background-color: #ffffff;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #666699;
}
.navbar-brand,
.navbar-nav li a {
line-height: 85px;
height: 85px;
padding-top: 0;
}
.navbar-toggle, span {
line-height: 75px;
height: 70px;
padding-top: 0px;
}
.navbar-default .navbar-nav>li>a {
color: #666699;
}
.sitecolor {
background-color: #666699;
}
.img-thumbnail {
line-height: 80px;
height: 80px;
padding-top: 0px ;
border-color: transparent;
}
#navbar-logo {
line-height: 30px !important;
height: 86px !important;
padding-top: 2px !important;
}
.nav>li>a {
padding: 9px 20px !important;
}
HTML:
<!DOCTYPE html>
<html lang="en" class="sitecolor">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type = "text/css" href="css/stylesheet.css" rel="stylesheet">
</head>
<body class="sitecolor">
<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="#">BSWeb</a> -->
<a href="#">
<img id="navbar-logo" src="http://www.betches.com/sites/default/files/article/list/images/google.jpg" />
</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>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
At the bottom of my CSS, I've tried .nav>li>a but not sure that has helped.
This could help (at least that's what comes to my mind without your code):
.navbar-nav li {
margin-bottom: 0; /* play with this value */
margin-top: 0; /* an this too */
}
.nav li{
margin-top: 10px; //change the 10 if you want
}
what you tried at the bottom of your CSS involves the padding.. you're looking for margins between elements.. specifically in this case the <li> elements
but if you like the position that the first Link is in and you just want to make the bottom 3 Links become closer to the top and each other then you're going to have to give the last 3 <li> elements a class name such as:
<li class="margin">Link</li>
<li class="margin">Link</li>
<li class="margin">Link</li>
then in your CSS:
.margin{
margin-top: 10px; //again, you can edit this
}
You can wrap those rules in a media query so they won't apply to your mobile navigation links:
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li {
padding: 35px 10px;
}
}
Sidenote: You don't (or shouldn't need to use the !important declaration). See revised CSS.
Working Example Snippet at FullPage.
.navbar.navbar-default {
background-color: #ffffff;
border-radius: 0;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
background-color: #ffffff;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #666699;
}
.navbar.navbar-default .navbar-header .navbar-toggle {
padding: 40px 15px;
}
.navbar.navbar-default .navbar-nav > li > a {
color: #666699;
}
.sitecolor {
background-color: #666699;
}
.navbar.navbar-default .navbar-brand {
color: #666699;
background-color: #ffffff;
padding-top: 0;
height: 100%;
}
.navbar.navbar-default .navbar-brand img {
height: 80px;
margin: 20px 0px 0px;
}
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li {
padding: 35px 10px;
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body class="sitecolor">
<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="#">BSWeb</a> -->
<a class="navbar-brand" href="#">
<img src="http://www.betches.com/sites/default/files/article/list/images/google.jpg" />
</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>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>