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
Related
So I have this code:
.hoverlist12:hover #details {
display: block;
}
The thing is the list doesn't appear at all. If I change the hoverlist12 class with the ul, it works fine, but it appears when I hover on all the elements, and I want it to appear when I hover it only on the first "li". Usually, I have no problem doing this but now I just can't figure it out.
.navbar {
border-radius: 0;
max-height: 50px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover {
color: #ffffff;
transform: scale(1.1);
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
color: #ffffff;
}
.navbar-default .navbar-nav > li:focus,
.navbar-default .navbar-nav > li:hover {
background-color: rgba(0, 0, 0, 0.15);
}
nav {
font-family: "ITCErasStd-Medium";
}
.hiddeOnTop {
visibility: hidden;
}
.container-fluid {
padding-right: 3%;
padding-left: 3%;
display: inline-block;
width: 100%;
}
.navbar-default,
.container-fluid {
background-color: #be3c7a;
}
.nav > li > a {
font-size: 1.1em;
}
.navbar .facebook {
padding: 0;
margin-top: 7px;
}
.navbar .facebook:hover {
background: none;
transform: scale(1.1);
}
.navbar-brand,
.nav > li.active > a {
font-family: "ITCErasStd-Bold";
}
#details {
padding: 26px 30px;
display: none;
color: white;
z-index: 900;
font-size: 2rem;
list-style-type: none;
position: absolute;
margin-top: 50px;
background-color: #be3c7a;
}
.hoverlist12:hover #details {
display: block;
}
<nav class="mobile_nav">
<button type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav-content">
<li>
<a href="htps://www.facebook.com" alt="facebook" class="facebook"
><img
src="./img/fb-icon.svg"
alt="fb-icon"
onerror="this.src='./img/fb-icon.png'"
/></a>
</li>
<!-- <li class="homelk">HOME</li> -->
<li class="homelk">
CE ESTE adadsadassssss
</li>
<li>INTREBARI FRECVENTE</li>
<li>PARTENERI</li>
<li>CONTACT</li>
<!-- <li><i class="fa fa-facebook-official"></i></li> -->
</ul>
</nav>
<!-- //////////////////////////// NAVBAR \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<nav class="navbar navbar-default">
<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 navigate" href="#home"><span>HOssME</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right dropdown">
<li class="hoverlist12">
CE ESTE USCACIUNEA
</li>
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
<li> DE CE HAYLO GYN </li>
<li> INTREBARI </li>
<li>CONTACT</li>
<li>
<a href="htps://www.facebook.com" alt="facebook" class="facebook"
><img
src="./img/fb-icon.svg"
alt="fb-icon"
s
onerror="this.src='./img/fb-icon.png'"
/></a>
</li>
<!-- <li><i class="fa fa-facebook-official"></i></li> -->
</ul>
</div>
</div>
</nav>
Use selector like this: .hoverlist12:hover ~ #details Because #details and .hoverlist12 elements are siblings or at same level. You can use this selector only .hoverlist12:hover #details when #details is a child element of .hoverlist12. So, please change your CSS code as I suggested OR Please change your structure like:
<li class="hoverlist12">
CE ESTE USCACIUNEA
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
</li>
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>
i want to change the color of my navbar when i scroll. When the navbar is on top the background is transparent.
thank's to all for the attention and excuse me for my bad english!!
/* COLORE NAVBAR */
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
box-shadow: 1px 1px #000;
}
.navbar-toggle {
background-color: transparent;
border: none;
}
.navbar-toggle:hover {
background-color: transparent! important;
}
.navbar-toggle:focus {
background-color: transparent! important;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
text-shadow: 1px 1px #000;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: red;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: yellow;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
background-color: blue;
}
.dropdown-menu>li>a {
color: green;
}
.dropdown-menu>li>a:hover {
background-color: brown;
color: violet;
}
.navbar-brand>li>a:hover {
color: white;
}
#media only screen and (max-width: 766px) {
.collapsing,
.in {
background: #fff;
}
.collapsing ul li a,
.in ul li a {
color: #fff!important;
float: left;
}
.collapsing ul li a:hover,
.in ul li a:hover {
color: #fff !important;
background-color: #E1332D;
}
}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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" style="color: white;">LUCA DELCONTE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about"><i class="fa fa-smile-o" aria-hidden="true"></i>
About</a>
</li>
<li>
<a class="page-scroll" href="#services"><i class="fa fa-diamond" aria-hidden="true"></i>
Design</a>
</li>
<li>
<a class="page-scroll" href="#work"><i class="fa fa-lightbulb-o" aria-hidden="true"></i>
Work</a>
</li>
<li>
<a class="page-scroll" href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i>
Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Use the Bootstrap Affix component to watch the scroll position instead of extra jQuery/JavaScript. Just define the .affix-top and .affix CSS for the navbar.
/* navbar style once affixed to the page */
.affix {
background-color: black;
}
#media (min-width:768px) {
.affix-top {
/* navbar style at top */
background-color:transparent;
border-color:transparent;
padding: 15px;
}
}
and set the position you want the navbar to change style (ie; 400px from the top)
<div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="400">
Working Demo:
http://www.codeply.com/go/xp2fY6sVHP
For Bootstrap 4, see: Animate/Shrink NavBar on scroll using Bootstrap 4
jQuery
/**
* Listen to scroll to change header opacity class
*/
function checkScroll(){
var startY = $('.navbar').height() * 2; //The point where the navbar changes in px
if($(window).scrollTop() > startY){
$('.navbar').addClass("scrolled");
}else{
$('.navbar').removeClass("scrolled");
}
}
if($('.navbar').length > 0){
$(window).on("scroll load resize", function(){
checkScroll();
});
}
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 was attempting to change the navbar color in Bootstrap, but it was unsuccessful. The navbar just stays the same as if I never added the CSS or custom styling.
I added the custom CSS into my custom CSS file, style.css. Below is the entire contents of the style.css file.
You can also view my HTML below, which is the contents of index.htm which regard the navbar and styling.
Note: I'm using bootstrap from the latest version located at http://getbootstrap.com; not previous versions (Example: Twitter Bootstrap)
style.css
/* Custom Styling */
/* Core Styling */
body {
font-famliy: Helvetica, sans-serif;
font-size 14px;
line-height: 1.42857143;
color: #333;
}
/* Navbar Styling */
/* navbar */
.navbar-default {
background-color: #14a3ff;
border-color: #1495fe;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ecf0f1;
}
.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: #ecf0f1;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ecf0f1;
background-color: #1495fe;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ecf0f1;
background-color: #1495fe;
}
.navbar-default .navbar-toggle {
border-color: #1495fe;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #1495fe;
}
.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: #ecf0f1;
}
#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: #ecf0f1;
}
.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: #ecf0f1;
background-color: #1495fe;
}
}
index.htm
index.htm > styling (head)
<!-- Custom Styling -->
<link rel="stylesheet" href="css/style.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.min.css" /> -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
index.htm > navbar & js (out of head)
<!-- Navbar -->
<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">
<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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
I found the solution to the issue that was occurring. It was quite a simple issue actually.
The issue was that I was adding the bootstrap CSS in the HTML after the custom css was added.
So it should've been:
<head>
<!-- Custom Styling -->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
</head>
Thanks for all the help.
As of Bootstrap 4 you can easily change the colour of a navbar background with the 'bg' class. A few examples are below:
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse">
<img src="#" alt="Logo" style="width:300px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</nav>
It is a basic navbar which expands on larger devices, collapses on smaller ones, and sticks to the top of the page. The "bg-white" element changes the background colour of the navbar from the default grey colour to white. A few more examples are:
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white
Bootstrap NavBar Generator is what you need. It is a little bit tricky when you use the CSS generated.
In case you find that after you insert the generated stylesheet the NavBar does not change at all.
Please including the following was what made it possible to change the navbar color:
.navbar{
background-image: none;
}
Hope this is helpful. :D