I'm new to Boostrap, and in an attempt to make a navbar more responsive for all screens and add some effects somewhere along the way my navbar lost its background color.
I've tried explicitly taking the navbar-light class and changed it's colour, but it doesn't seem to work.
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>
Navbar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<a class="navbar-brand logo_h" href="index.html"><h2>Brand</h2></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div
class="collapse navbar-collapse offset"
id="navbarSupportedContent"
>
<ul class="nav navbar-nav menu_nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pricing.html">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
The CSS:
.header_area {
padding: 0px;
border: 0px;
border-width: 0px;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 99;
-webkit-transition: background 0.4s, all 0.3s linear;
-o-transition: background 0.4s, all 0.3s linear;
transition: background 0.4s, all 0.3s linear;
}
.header_area .navbar {
padding: 0px;
border: 0px;
border-width: 0px;
}
.header_area .navbar .nav .nav-item {
margin-right: 45px;
}
.header_area .navbar .nav .nav-item .nav-link {
font: 500 12px/100px "Roboto", sans-serif;
text-transform: uppercase;
color: #222222;
padding: 0px;
display: inline-block;
}
.header_area .navbar .nav .nav-item .nav-link:after {
display: none;
}
.header_area .navbar .nav .nav-item:hover .nav-link,
.header_area .navbar .nav .nav-item.active .nav-link {
color: #ff2f92;
}
.header_area .navbar .nav .nav-item.submenu {
position: relative;
}
.header_area .navbar .nav .nav-item.submenu ul {
border: none;
padding: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
margin: 0px;
background: #fff;
}
#media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu ul {
position: absolute;
top: 120%;
left: 0px;
min-width: 200px;
text-align: left;
opacity: 0;
-webkit-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
display: block;
border: none;
padding: 0px;
border-radius: 0px;
}
}
.header_area .navbar .nav .nav-item.submenu ul:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-color: #eeeeee transparent transparent transparent;
position: absolute;
right: 24px;
top: 45px;
z-index: 3;
opacity: 0;
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item {
display: block;
float: none;
margin-right: 0px;
border-bottom: 1px solid #ededed;
margin-left: 0px;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
line-height: 45px;
color: #222222;
padding: 0px 30px;
-webkit-transition: all 150ms linear;
-o-transition: all 150ms linear;
transition: all 150ms linear;
display: block;
margin-right: 0px;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child {
border-bottom: none;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
background: #ff2f92;
color: #fff;
}
#media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu:hover ul {
visibility: visible;
opacity: 1;
top: 100%;
}
}
.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item {
margin-top: 0px;
}
.header_area .navbar .nav .nav-item:last-child {
margin-right: 0px;
}
.header_area + section,
.header_area + row,
.header_area + div {
margin-top: 100px;
}
.header_area.navbar_fixed .main_menu {
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
background: #fff;
-webkit-transform: translateY(70px);
-ms-transform: translateY(70px);
transform: translateY(70px);
-webkit-transition: background 500ms ease, -webkit-transform 500ms ease;
transition: background 500ms ease, -webkit-transform 500ms ease;
-o-transition: transform 500ms ease, background 500ms ease;
transition: transform 500ms ease, background 500ms ease;
transition: transform 500ms ease, background 500ms ease,
-webkit-transform 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
-webkit-box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}
I want to know why this happened, where I went wrong and a solution to my problem.
Your error is here:
<nav class="navbar navbar-expand-lg navbar-light">
In bootstrap 4 we use bg-light instead of navbar-light like below...
If you want another colors, check the documentation here: https://getbootstrap.com/docs/4.0/components/navbar/#color-schemes
.header_area {
padding: 0px;
border: 0px;
border-width: 0px;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 99;
-webkit-transition: background 0.4s, all 0.3s linear;
-o-transition: background 0.4s, all 0.3s linear;
transition: background 0.4s, all 0.3s linear;
}
.header_area .navbar {
padding: 0px;
border: 0px;
border-width: 0px;
}
.header_area .navbar .nav .nav-item {
margin-right: 45px;
}
.header_area .navbar .nav .nav-item .nav-link {
text-transform: uppercase;
color: #222222;
padding: 0px;
display: inline-block;
}
.header_area .navbar .nav .nav-item .nav-link:after {
display: none;
}
.header_area .navbar .nav .nav-item:hover .nav-link,
.header_area .navbar .nav .nav-item.active .nav-link {
color: #ff2f92;
}
.header_area .navbar .nav .nav-item.submenu {
position: relative;
}
.header_area .navbar .nav .nav-item.submenu ul {
border: none;
padding: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
margin: 0px;
background: #fff;
}
#media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu ul {
position: absolute;
top: 120%;
left: 0px;
min-width: 200px;
text-align: left;
opacity: 0;
-webkit-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
display: block;
border: none;
padding: 0px;
border-radius: 0px;
}
}
.header_area .navbar .nav .nav-item.submenu ul:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-color: #eeeeee transparent transparent transparent;
position: absolute;
right: 24px;
top: 45px;
z-index: 3;
opacity: 0;
-webkit-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item {
display: block;
float: none;
margin-right: 0px;
border-bottom: 1px solid #ededed;
margin-left: 0px;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
line-height: 45px;
color: #222222;
padding: 0px 30px;
-webkit-transition: all 150ms linear;
-o-transition: all 150ms linear;
transition: all 150ms linear;
display: block;
margin-right: 0px;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child {
border-bottom: none;
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
background: #ff2f92;
color: #fff;
}
#media (min-width: 992px) {
.header_area .navbar .nav .nav-item.submenu:hover ul {
visibility: visible;
opacity: 1;
top: 100%;
}
}
.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item {
margin-top: 0px;
}
.header_area .navbar .nav .nav-item:last-child {
margin-right: 0px;
}
.header_area + section,
.header_area + row,
.header_area + div {
margin-top: 100px;
}
.header_area.navbar_fixed .main_menu {
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
background: #fff;
-webkit-transform: translateY(70px);
-ms-transform: translateY(70px);
transform: translateY(70px);
-webkit-transition: background 500ms ease, -webkit-transform 500ms ease;
transition: background 500ms ease, -webkit-transform 500ms ease;
-o-transition: transform 500ms ease, background 500ms ease;
transition: transform 500ms ease, background 500ms ease;
transition: transform 500ms ease, background 500ms ease,
-webkit-transform 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
-webkit-box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>
Navbar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container box_1620">
<a class="navbar-brand logo_h" href="index.html"><h2>Brand</h2></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div
class="collapse navbar-collapse offset"
id="navbarSupportedContent"
>
<ul class="nav navbar-nav menu_nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pricing.html">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
The problem about the huge navbar is here:
.header_area .navbar .nav .nav-item .nav-link {
font: 500 12px/100px "Roboto", sans-serif;
text-transform: uppercase;
color: #222222;
padding: 0px;
display: inline-block;
}
What's doing that is the line:
font: 500 12px/100px "Roboto", sans-serif;
You have to put a smaller font, or just delete it and it'll do the trick!
Related
hi the dropdown content isalways shown.. but i want it only when dropbutton is clicked ..on clicking the button background toggles in and out but the links remain outside the menu permanentaly.. please see
i have also attached screenshot below ..to be more clear
navbar css
.header-nav {
background-color: rgba(0, , 6, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
left: 0;
height: 80px;
position: fixed;
top: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 100%;
z-index: 999;
}
.header-nav.bg-color {
background-color: #fff;
}
.header-nav.menu-bg {
height: 56px;
}
/* menu */
.navbar-brand {
color: #fff;
font-size: 36px;
font-weight: bold;
line-height: 80px;
padding: 0;
text-transform: capitalize;
}
.header-nav.menu-bg .navbar-brand {
line-height: 56px;
}
.navbar-brand:hover {
color: #fff;
}
.navbar-brand > img {
height: 80px;
-webkit-transition: height 0.4s ease-in-out;
-moz-transition: height 0.4s ease-in-out;
-o-transition: height 0.4s ease-in-out;
transition: height 0.4s ease-in-out;
}
.menu-bg .navbar-brand > img {
height: 56px;
}
.bg-color .main-menu .navbar-nav li a {
color: #000;
}
.main-menu .navbar-nav li a {
color: #22a265;
font-size: 16px;
padding: 30px 20px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.menu-bg .main-menu .navbar-nav li a {
padding: 18px 15px;
color: #222;
}
.menu-bg .main-menu .navbar-nav li a:hover {
color: #fafafa;
}
.main-menu .navbar-nav li a:focus {
background-color: transparent;
}
.main-menu .navbar-nav li a:hover, .main-menu .navbar-nav li a.active {
color: #fff;
background-color: #04b962;
}
.menu-bg {
background-color: #fff;
box-shadow: 0 2px 10px -1px rgba(87, 97, 100, 0.35);
}
a img.logo-color {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-white {
opacity: 0;
height: 0;
}
.menu-bg a img.logo-color {
opacity: 1;
}
.main-menu .navbar-nav li a.menubgactive {
background-color: #f0f0f0;
}
.main-menu .navbar-nav li a.menubgactive:hover {
background-color: #04b962;
}
/* navbar-toggle responsive menu */
.navbar-toggle {
border: none;
background: transparent;
}
.navbar-toggle.collapsed .icon-bar {
background-color: #04b962;
}
.navbar-toggle .icon-bar {
background-color: #e91313;
}
.navbar-toggle:hover {
background: transparent;
}
.navbar-toggle .icon-bar {
width: 32px;
height: 4px;
-webkit-transition:all 0.2s ease 0s;
-moz-transition:all 0.2s ease 0s;
-ms-transition:all 0.2s ease 0s;
-o-transition:all 0.2s ease 0s;
transition:all 0.2s ease 0s;
}
.navbar-toggle .top-bar {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
-o-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
i want to click on 'stock' to open further links but they are always open
menu html..
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Stock
</a>
<div class="dropdown-menu dropdown-default" aria-labelledby="navbarDropdownMenuLink"> </div>
<a class="dropdown-content " href="#">Pick list</a>
<a class="dropdown-item" href="#">Satt i lager</a>
<a class="dropdown-item" href="#">Telling</a>
</li>
If you want to only use css to do this, you would do something like this:
You would include:
display: none;
And in include:
element:hover {
display: block;
}
If you are using bootstrap css, then you can do this way
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="pulse.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-primary h-100 dropdown-toggle" data-toggle="dropdown">Menu</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Primary</li>
<li class="dropdown-item">Home</li>
<li class="dropdown-item">Shop</li>
<li class="dropdown-item">Products</li>
<li class="dropdown-header">Secondary</li>
<li class="dropdown-item">About</li>
<li class="dropdown-item">Contact Us</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
I'm trying to upgrade my entire project from bootstrap 3.3.0 to bootstrap 4.0.0, but an important element isn't shown as it should, a side menu.
This is the basic code of the menu:
$(document).ready(function() {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function() {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
body {
position: relative;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: transparent;
}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
display: none;
}
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250, 250, 250, .8);
z-index: 1;
}
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>loleo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!--NO TOCAR-->
<script src="sidebar.js"></script>
<link rel="stylesheet" type="text/css" href="signup.css">
<link href="sidebar.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- SIDEBAR -->
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand nav-item"> <a href="#" class="nav-link">
LOGO
</a>
</li>
<li class="nav-item"> READ
</li>
<li class="nav-item"> HISTORY
</li>
<li class="nav-item"> NOTIFICATIONS
</li>
<li class="dropdown nav-item"> CONFIG<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-item">PROFILE
</li>
<li class="dropdown-item">PREMIUM
</li>
<li class="dropdown-item">LOG OUT
</li>
</ul>
</li>
</ul>
</nav>
<!-- FIN DEL SIDEBAR -->
<!-- INICIO DEL BODY -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<!--modificable desde aquí-->
<!--hasta aquí-->
</div>
<!-- z -->
</div>
</body>
</html>
So, as you might have guessed, the menu should disappear totally when it's closed. I think a class is wrong, I have tried to change some of them, but don't know which one. Any idea?
I've finally found the problem.
in
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" id="sidebar-wrapper" role="navigation">
It's useless writting the "navbar" class of the css, it is superimposing, so "there are two sidebars". Just deleted this class from the label and finished.
I really want my navbar to scale to the screen, as the screen gets smaller so does the font, as well as the image. Any help? Kinda like https://devmounta.in/ navbar, like the image scales as well as the text.
HTML:
<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>
<div class="logo">
<a class="navbar-brand" href="#"><img src="css/images/logo.png"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Stats</li>
<li>Drivers</li>
<li>Contact</li>
<li id="btn">Pledge Now</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-default {
background: 0 0;
border: none;
border-radius: 0;
margin-bottom: 0;
}
.container-fluid {
padding: 0;
width: 90%;
margin: 0 auto;
}
.navbar-brand, .navbar-nav li a {
line-height: 85px;
height: 85px;
padding-top: 0;
}
.navbar-default .navbar-brand {
color: #FFF;
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
font-size: 28px;
text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
font-size: 18px;
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
position: relative;
text-decoration: none;
display: inline;
padding: 0;
margin-left: 15px;
margin-right: 15px;
text-transform: uppercase;
}
.logo {
width: auto;
height: 85px;
}
.logo img {
height: 45px;
line-height: 45px;
display: inline-block;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #84CF96;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
.navbar-default .navbar-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
margin-bottom: -10px;
bottom: 0;
left: 0;
background-color: #84CF96;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-default .navbar-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#btn a{
border: 1px solid #F5F5F5;
padding: 10px;
}
#btn a:hover:before {
visibility: hidden;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#btn a:hover , #btn a:focus{
color: #FFF;
background-color: #84CF96;
border-color: #84CF96;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
Mobile CSS:
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
.navbar-default {
background-color: #84CF96;
}
.navbar-default .navbar-toggle {
border: 0;
float: left;
margin-top: 23.5px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #6AA678;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
width: 25px;
height: 4px;
}
.navbar-default .navbar-brand {
float: right;
}
.navbar-nav {
margin: 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a {
display: block;
border-bottom: 1px solid #6AA678;
margin: 0;
height: 60px;
line-height: 60px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #FFF;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
.navbar-default .navbar-nav > li:hover, .navbar-default .navbar-nav > li:focus {
background-color: #6AA678;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
-o-transition: .5s ease;
transition: .5s ease;
}
#btn{
display: none;
}
.navbar-collapse.in {
overflow-y: visible;
margin-bottom: 20px;
padding: 0;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #6AA678;
}
}
I'm not sure if this is gonna work in your case, but you can try changing your image width from "auto" to "100%" in your styles:
.logo {
width: 100%;
....
}
.logo img {
width: 100%;
...
}
This usually works for images, so probably will work within your nav.
Hope it helps!
I'm currently working on the basis of a side navigation bar which will be enabled by the old hamburger button.
/* * Navigation Menu
* The Hambuger will open this
*
*/
.navigation-container {
height: 100%;
width: 240px;
background: #FFFFFF;
border-right: 2px solid #252525;
position: fixed;
top: 0;
left: 0;
}
.navigation {
width: 80%;
padding: 0;
margin: 0;
margin-left: 10px;
}
.navigation ul {
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 20px;
}
.navigation ul li {
/* Setting the area */
list-style: none;
margin: 0 auto;
padding: 20px 0px;
/* Typography changes */
text-decoration: none;
color: #DDDDDD;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
/* Extra Styling */
border-bottom: 1px solid #DDDDDD;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navigation ul .fa {
padding: 0;
margin: 0;
padding-right: 5px;
font-size: 20px;
color: #DDDDDD;
}
.navigation-container, .navigation li, > li {
color: #252525;
}
.navigation ul li:hover {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aaron Ward's Portfolio</title>
<!-- Stylesheet links -->
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Open Sans Typeface Import -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600' rel='stylesheet' type='text/css'>
<!-- Personal stylesheets -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- NAVIGATION START -->
<div class="navigation-container">
<div class="navigation">
<ul>
<a href="">
<li>
<i class="fa fa-home fa-fw"></i></span>
HOME
</li>
</a>
<a href="">
<li>
<i class="fa fa-connectdevelop fa-fw"></i>
WORK
</li>
</a>
<a href="">
<li>
<i class="fa fa-user fa-fw"></i>
ABOUT
</li>
</a>
<a href="">
<li>
<i class="fa fa-envelope fa-fw"></i>
CONTACT
</li>
</a>
</ul>
</div>
</div>
</body>
As you can see when hovering over the [ul li] element's, the font-awesome icon is not changing color.
I have tried adding the following (results didn't work):
.navigation ul li:hover, .navigation ul .fa:hover {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navigation ul .fa:hover {
color: #252525;
}
but clearly this wouldn't work as I want the whole area to effect both elements (FA & the text color.
So ultimately:
How do I make both the text and Font awesome icon change color when hovering over the respected ul li element
There is a problem with your markup, <a> should be inside <li>. And <li> must be directly under <ul>, you can fix it all together once.
a:hover {
color: red;
}
/* if the above code didn't work for you
a:hover, a:hover .fa {
color: green;
}
*/
/* if the above code didn't work for you
a:hover, a:hover .fa::before {
color: blue;
}
*/
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-fw"></i>
HOME
</a>
</li>
</ul>
THIS CSS:
.navigation ul li:hover, .navigation ul li:hover .fa {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.....
/* * Navigation Menu
* The Hambuger will open this
*
*/
.navigation-container {
height: 100%;
width: 240px;
background: #FFFFFF;
border-right: 2px solid #252525;
position: fixed;
top: 0;
left: 0;
}
.navigation {
width: 80%;
padding: 0;
margin: 0;
margin-left: 10px;
}
.navigation ul {
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 20px;
}
.navigation ul li {
/* Setting the area */
list-style: none;
margin: 0 auto;
padding: 20px 0px;
/* Typography changes */
text-decoration: none;
color: #DDDDDD;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
/* Extra Styling */
border-bottom: 1px solid #DDDDDD;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navigation ul .fa {
padding: 0;
margin: 0;
padding-right: 5px;
font-size: 20px;
color: #DDDDDD;
}
.navigation-container,
.navigation li,
> li {
color: #252525;
}
.navigation ul li:hover {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navigation ul li:hover,
.navigation ul li:hover .fa {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aaron Ward's Portfolio</title>
<!-- Stylesheet links -->
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Open Sans Typeface Import -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600' rel='stylesheet' type='text/css'>
<!-- Personal stylesheets -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- NAVIGATION START -->
<div class="navigation-container">
<div class="navigation">
<ul>
<a href="">
<li>
<i class="fa fa-home fa-fw"></i>
</span>
HOME
</li>
</a>
<a href="">
<li>
<i class="fa fa-connectdevelop fa-fw"></i>
WORK
</li>
</a>
<a href="">
<li>
<i class="fa fa-user fa-fw"></i>
ABOUT
</li>
</a>
<a href="">
<li>
<i class="fa fa-envelope fa-fw"></i>
CONTACT
</li>
</a>
</ul>
</div>
</div>
Move the ":hover" selector to the tag that you're actually going to be hovering over. Then specify the child elements you want affected so it takes this form.
#parent:hover #child {
/* ... */
}
So your selectors should look like this (About).
.navigation ul li:hover {
padding: 35px 0px;
color: #252525;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.navigation ul:hover .fa {
color: #252525;
}
I am trying to use the collapse function in Bootstrap after watching some tutorials I tried it out myself and I am left with no links showing on a large viewport.
Here is my code does anbody notice anything that might be wrong with it?
The HTML:
<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand"></a>
</div>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Used Cars
</li>
<li>Get Finance
</li>
<li class="dropdown">About Driven<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
<a href"#">The Team</a>
</li>
<li>
<a href"#">Our Partners</a>
</li>
</ul> <!--Drop Down End-->
</li>
<li>How To Find Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
The custom CSS:
.logo-nav {
height: 2.3em;
width: auto;
}
.brand {
font-size: 2em;
margin: 20px 0 25px;
}
.navbar-brand {
opacity: 0;
color: #ff0066;
-webkit-transition:opacity 0.3s ease-in;
-moz-transition:opacity 0.3s ease-in;
-o-transition:opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
margin-left: 0px;
}
.navbar {
border-radius: 0px;
border-left: none;
border-right: none;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar- default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #DD3B4D;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #fff;
}
.dropdown-menu {
color: #fff;
background-color: #DD3B4D;
}
.dropdown-menu>li>a {
color: #fff;
}
nav.affix {
top: 0;
width: 100%;
z-index: 1000;
}
nav.affix .navbar-brand {
opacity: 1;
height: 2.3em;
width: auto;
}
.navbar-header {
width: 0px;
-webkit-transition:width .4s ease-in-out;
-moz-transition:width .4s ease-in-out;
-o-transition:width .4s ease-in-out;
transition:width .4s ease-in-out;
margin: 0 1em 0 1em
}
nav.affix .navbar-header {
width: 8em;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
margin: 0 1em 0 0;
}
.nav-links {
font: 600 15px/1.5 'Arimo';
}
.navbar-nav > li:last-child{
border-right: 1px solid #475d88;
}
ul.nav a:hover {
color: #fff !important;
background-color: #DD3B4D !important;
-webkit-transition: background-color 0.6s ease;
-moz-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;
}
nav.affix .navbar-brand {
display: inline-block;
}
Sorry for the amount of CSS I didn't realise how much there was ha.
I have had a good play about and can't seem to stop this from happening.
Remove the collapse class
Link http://jsfiddle.net/LvhCh/1/
<div class="nav-collapse navbar-responsive-collapse" data-toggle="collapse" data-target=".navbar-nav">