I have a navbar that shrinks on scroll, the li's in the navbar-nav have an image, when the navbar shrinks on scroll the image stays but the text display becomes none.
I have a function that shows this text on hover after it disappears but i have a problem, i only want this function to work only after the navbar shrinks, and when the navbar goes to it's normal size i don't want this function to work, and another thing i want the function to display the text for each li separately because when i hover it shows all of the spans with the text, i only want the child of the li, i tried the .children() method but it didn't work, please help! here is my code:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
$('.home').hover(function() {
$(this).css('margin-right', '5px');
$('.navbar-nav li a span').css('display', 'block');
$('.navbar-nav li a').css('height', '155px');
$('.navbar-nav li a img').css('margin-right', '5px');
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
to achieve the behaviour you want, you do not need to abuse javascript, of course it can be done with JS, but it is much easier and straightforwad is just to use CSS
just add this rule to your code:
nav.shrink .navbar-nav li:hover a span{
display: block
}
this is of course just example, but I am sure that using the CSS approach you will achieve your goal easier, faster and without extra performance overhead=)
Here is a working snippet:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
nav.shrink .navbar-nav li:hover a span{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
Related
I have searched through a ton of articles here trying the fixes for this issue with no luck. Wanted to see if there is a fix for this I am overseeing on our company site.
Issue: I develop in FireFox and once was done with the beta version of the site I found a bug when viewing in Chrome. The issue is that the nav bar is shorter in Chrome & IE and looks perfect in FF and Safari. Below is the HTML and CSS for this section. You can see in the screen the differences in the way it's displaying if you click the image link. Thank You in advance for any insight!
Navigation Bar Issue
CSS
.navigation {
min-height: 50px;
}
.navigation .navbar {
border: none;
margin-bottom: 0;
min-height: 50px;
}
.navigation .navbar .navbar-brand {
color: #fff;
font-size: 40px;
font-weight: 700;
height: 70px;
line-height: 35px;
}
.navigation .navbar-default {
background-color: #0091D5;
box-shadow: 0 0px 10px rgba(0,0,0,.2);
border: none;
border-radius: 0;
clear: both;
}
.navigation .navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 700;
padding-top: 15px;
padding-bottom: 15px;
}
.navigation .navbar-default .navbar-nav>li>a:hover,
.navigation .navbar-default .navbar-nav>.active>a,
.navigation .navbar-default .navbar-nav>.active>a:hover,
.navigation .navbar-default .navbar-nav>.active>a:focus {
background: #FF7200;
color: #FFFFFF;
}
.navigation .btn-default:hover,
.navigation .btn-default:focus,
.navigation .btn-default:active,
.navigation .btn-default.active {
border-color: transparent;
}
HTML
<section id="menu">
<div class="navigation">
<div id="main-nav" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- end .navbar-header -->
<div class="navbar-collapse collapse">
<ul id="ulnav" class="nav navbar-nav">
<li> </li>
<li> Home</li>
<li>Water Damage</li>
<li>Fire</li>
<li>Drying Services</li>
<li>Restoration</li>
<li>Commercial</li>
<li>Reviews</li>
<li>Insurance & Financing</li>
<li>About</li>
<li class="cwaf-bg">Free Estimate</li>
</ul>
</div>
</div>
</div>
</div>
</section>
just try your snippet into codepen, and it's no problem in Chrome or Opera. both of them use webkit as engine
make sure your other style (global style) not give an effect to your navigation
I do have the topbar along with navbar with anchor tag in the same page. When I click on the anchor tag the content of anchortag does go behind the navbar. Please find below the code: HTML:
<body>
<!-- Full Body Container -->
<div id="container">
<!-- Start Header Section -->
<header id="header-wrap" class="site-header clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-8 col-xs-6">
<!-- Start Contact Info -->
<ul class="contact-details hidden-xs">
<li>
<a href="contact.html">
<i class="icon-envelope">
</i>
<span class="hidden-xs">the email address</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-call-out">
</i>
<span class="hidden-xs"> Call Us: 123456789 </span>
</a>
</li>
</ul>
<!-- End Contact Info -->
</div>
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-12">
<!-- Start Social Links -->
<ul class="social-list">
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-call-out">
</i>
</a>
</li>
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-envelope">
</i>
</a>
</li>
<li>
<i class="fa fa-facebook"></i>
</li>
<li>
<i class="fa fa-twitter"></i>
</li>
<li>
<i class="fa fa-google-plus"></i>
</li>
<li>
<i class="fa fa-linkedin"></i>
</li>
</ul>
<!-- End Social Links -->
</div>
</div>
</div>
</div>
<!-- End Top Bar -->
<!-- Start Logo & Navigation -->
<div id= "fixedbar" class="navbar navbar-default navbar-top" role="navigation" data-spy="affix" data-offset-top="50">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Toggle Nav Link For Mobiles -->
<div class="logo-wrapper">
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo6.png" alt="SB Construction">
</a>
</div>
</div>
<!-- Brand and toggle menu for mobile ends -->
<div class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "toplinks">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "toplnks">
<a href="#ourvision">
Our Mission
</a>
</li>
<li id= "toplnked">
<a href= "#ourvision">
Our Vision
</a>
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "mbil1">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "mbil2">
<a href="#ourvision">
Our Vision
</a>
</li>
<li id= "mbil3">
<a href= "#ourmission">
Our Mission
</a>
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Navigation -->
<div class="clearfix"></div>
</header>
<!-- End Header Section -->
Here is my CSS:
.top-bar {
background: #EEEEEE;
border-bottom: 1px solid #ddd;
}
.top-bar .contact-details li {
display: inline-block;
padding: 8px 0;
}
.top-bar .contact-details li a {
font-size: 14px;
display: block;
margin-right: 15px;
color: #999;
line-height: 32px;
}
.top-bar .contact-details li a i {
padding-right: 5px;
vertical-align: middle;
}
.top-bar ul.social-list {
float: right;
padding: 8px 0;
}
.navbar-top.affix {
width: 100%;
top: 0;
z-index: 9999999;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.navbar-top.affix .logo-wrapper {
margin-top: 15px;
margin-bottom: 18px;
}
.navbar-top.affix .logo-wrapper .navbar-brand img {
width: 100px;
}
.navbar-top.affix .navbar-nav > li {
padding: 15px 0!important;
}
.navbar-top.affix .search-side {
top: 15px;
}
.navbar-top.affix .full-search {
top: 67px;
}
.navbar {
margin-bottom: 0;
background: #fff;
border: none;
border-bottom: 1px solid #eee;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.logo-wrapper {
margin-top: 19px;
margin-bottom: 17px;
float: left;
}
.navbar-brand {
padding-bottom: 0px;
display: block;
height: auto;
padding-top: 0;
}
.navbar-default .navbar-nav {
margin-right: 5px!important;
position: relative;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav > li {
padding: 31px 0;
}
.navbar-default .navbar-nav > li > a {
color: #999;
display: block;
font-size: 14px;
font-family: 'Lato', sans-serif;
padding: 7px 16px;
text-transform: uppercase;
font-weight: 700;
border-radius: 0px;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li > a.active {
color: #ffbb02;
}
.navbar-default .navbar-nav > li > a i {
margin: 0 -2px 0 -5px;
}
.navbar-default .navbar-nav .dropdown {
position: absolute;
left: 0;
top: 100%;
width: 260px;
background-color: #fff;
visibility: hidden;
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav > li.drop:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown li,
.sup-dropdown li {
position: relative;
border-bottom: 1px dotted #eee;
}
.dropdown li:last-child,
.sup-dropdown li:last-child {
border-bottom: none;
}
.dropdown li a,
.sup-dropdown li a {
display: block;
color: #666;
font-size: 14px;
font-family: 'Lato', sans-serif;
font-weight: 400;
padding: 11px 16px;
margin: 0;
text-decoration: none;
text-transform: capitalize;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.dropdown li a i {
margin: 0 0 0 -4px;
}
.navbar-default .navbar-nav .sup-dropdown {
position: absolute;
left: 100%;
top: 0;
width: 260px;
background-color: #fff;
margin-top: 10px;
transition: margin-top 0.2s ease-in-out;
-moz-transition: margin-top 0.2s ease-in-out;
-webkit-transition: margin-top 0.2s ease-in-out;
-o-transition: margin-top 0.2s ease-in-out;
visibility: hidden;
z-index: 3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav li.drop .dropdown li:hover .sup-dropdown {
visibility: visible;
margin-top: 0;
}
.dropdown > li:hover > a,
.sup-dropdown li:hover > a {
color: #fff;
background-color: #ffbb02;
}
.dropdown li a.active,
.sup-dropdown li a.active {
color: #fff;
background-color: #ffbb02;
}
.nav > li.drop:hover ul.dropdown {
display: block;
-webkit-animation: drop-up 400ms ease both;
-moz-animation: drop-up 400ms ease both;
-o-animation: drop-up 400ms ease both;
animation: drop-up 400ms ease both;
}
#media screen and (max-width: 767px) {
.js #wpb-mobile-menu {
display: none;
}
.js .slicknav_menu {
display: block;
}
}
Here is my Javascript I searched through stackoverflow posts:
$("#toplinks, #toplnks, #toplnked").on('click','a', function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $("#fixedbar").outerHeight(true);
window.scrollTo(0,sT);
});
So whenever I click on the anchor tag the content of ID "whoweare" will start from top of the page (behind the navbar). Please note I do have topbar on the top of navbar, which(topbar) on scroll gets hidden and navbar placed at top.
Also note, I have added the code for the index page (first page), the same code of topbar and navbar I will use for other pages (e.g: services, projects etc).
Please help me out to make my navbar functions properly.
I got it working...
Please, read these detailled explanations.
first:
Using jQuery, you have to use selectors that actually exist in your HTML.
In your script, "#toplinks, #toplnks, #toplnked and #fixedbar just refer to absolutely nothing.
The impact was that your script simply never triggered at all.
The scroll effect you were observing was the natural default behaviour of a link click.
Second:
You have two "special cases" where this script should not do the same thing as for the other links.
"Section 1" needs to scroll to window position zero in order to show the top-nav.
It should not calculate an offset.
"Section 4" opens a sub-menu showing "Section 4-1" and "Section 4-2".
Since this "Section 4" also is a link, you have to remove its useless href attribute (href="#").
Then in the script, you have to check if $(this).attr("href") is defined to avoid script error.
I left many explicative console.log() because I'm pretty sure that you will play with this menu to add elements to it.
You will certainly notice that the script runs twice on the sub-menu items.
That is because the event is "bublling" to its parent (the "Section 4" a).
But this is no big deal.
If you try to stop this "bubbling" effect, you'll break the Bootstrap action on the menu.
So just remove or comment out all console.log() on your final page.
;)
Here is the script
And here is a CodePen, which you can play with (and see how I made it working).
console.clear()
console.log("READY!");
$(".navbar-nav li").on('click','a', function(event){
event.preventDefault();
// Which link was clicked?
console.log($(this).attr("href"));
// Section 1 case:
if( $(this).attr("href")=="#section1" ){
$("body").scrollTop(0);
console.log("Window simply has to scroll to position: 0");
}
// Section 4 case (Or any link which triggers a sub-menu)
if(typeof($(this).attr("href"))=="undefined"){
console.log("This link shall NOT trigger a scroll.");
}
// All the other cases.
if(typeof($(this).attr("href"))!="undefined" && $(this).attr("href")!="#section1"){
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $(".navbar").outerHeight(true);
window.scrollTo(0,sT);
console.log("Section offset is: "+o.top);
console.log("Nav bar height is: "+$(".navbar").outerHeight(true));
console.log("Window has to scroll to position: "+sT);
}
// Just an empty console line for clarity.
console.log("");
});
My navbar is hiding my the div that should be above it
Not complete replica of my own but here is the fiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Burger Corner</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- NAVBAR -->
<nav class="navbar 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">Burger Corner</a>-->
<img src="images/logo.png" width="90" height="60">
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right main-nav">
<li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
<li><a class="page-scroll color_animation" href="#intro">Welcome</a></li>
<li><a class="page-scroll color_animation" href="#services">About us</a></li>
<li><a class="page-scroll color_animation" href="#reservation">Reservation</a></li>
<li><a class="page-scroll color_animation" href="#contact">Contact us</a></li>
<li><a id="login_lnk"class="page-scroll color_animation" href="#login" data-toggle="modal" >Login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section class="top-title">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Burger Corner</h1>
</div>
</div>
</div>
</section>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Welcome section</h1>
</div>
</div>
</div>
</section>
<!-- About Section -->
<div id="wall_1" class="image"></div>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
CSS for the problematic div and the one that works :
.top_title{
font-family: 'Playball', cursive;
/* background-image: url(../images/intro.jpg) no-repeat center center;*/
background-size: cover;
width: 100%;
height: 100px;
background-color:#990000;
text-align:center;
padding-top: 150px;
}
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
z-index: 1;
}
CSS for the navbar:
.color_animation {
text-decoration: none;
margin-right: -5px;
margin-left: -5px !important;
color: white !important;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.color_animation:hover{
color: #990000 !important;
}
.main-nav a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #000;
display: block;
text-align: center;
padding: 2px 0;
transition: color 0.3s ease-in-out;
}
.main-nav {
padding: 0;
/*margin: auto 0 auto;*/
}
li{
color: white !important;
word-spacing: 5px !important;
}
Extra CSS:
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
I even tried using the intro-section class and modified it, changed its name and added some code but it genuinely doesnt work.The navbar hides it, it doesnt have the background i told it to have or even the height
I made the navbar invisible just for the testing and as you can see the div is under the navbar and the orange section is the one i said i took its css and modified it.
I don't think there is a CSS solution to your code. You can check the scroll position to make the navbar fixed and back to static, by removing or adding the navbar-fixed-top class, like this:
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('.navbar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 51) {
$('.navbar').removeClass('navbar-fixed-top');
}
});
Updated FIDDLE.
What I'm trying to do is have the tabs change the background image shown in the section.
Similar to this jsfiddle - http://jsfiddle.net/r6r7U/12/
But I can't get that method to work for me. How can I change an image with each tab? Ex - tab 1 shows background1, tab2 shows background2, etc.
There is a working example of what I mean on this website - https://www.vidyard.com/
.page-section {
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.page-section.page-section-center {
align-content: center;
text-align: center;
}
.page-section.page-section-lg {
padding-top: 50px;
padding-bottom: 50px;
}
.page-section.page-section-white {
background-color: #fff;
}
}
.help-nav-tabs .nav-tabs {
font-size: 16px;
}
.help-nav-tabs .nav-tabs > li.active > a {
background-color: transparent !important;
border: 0px transparent solid !important;
font-weight: 500 !important;
}
.help-nav-tabs .nav-tabs a {
border-bottom: 4px solid #2db2e9 !important;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a {
border-bottom: 0px transparent solid !important;
color: #32404E;
font-weight: 400;
-webkit-transition: color ease 0.3s;
-o-transition: color ease 0.3s;
transition: color ease 0.3s;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a:hover {
background-color: transparent !important;
border: 0px !important;
color: #50667d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> rel="stylesheet" />
<section class="page-section page-section-xlg page-section-center page-section-white help-nav-tabs page-section-no-bd">
<div class="container">
<div class="col-md-offset-2 col-md-8">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="help-tabs">
<li class="active">
<a href="#how-ot-maintenance" data-toggle="tab" aria-expanded="true" data-no-scroll>
Maintenance
</a>
</li>
<li class="">
<a href="#how-ot-crm" data-toggle="tab" aria-expanded="true" data-no-scroll>
Sales & Marketing
</a>
</li>
<li class="">
<a href="#how-ot-projects" data-toggle="tab" aria-expanded="true" data-no-scroll>
Project Management
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content wrap wrap-bt wrap-bt-lg">
<div class="tab-pane fade in active" id="how-ot-maintenance">
<h2>Control Costs</h2>
</div>
<div class="tab-pane fade" id="how-ot-crm">
<h2>Customer</h2>
</div>
<div class="tab-pane fade" id="how-ot-projects">
<h2>Take</h2>
</div>
</div>
</div>
</div>
</section>
Bootstrap requires jQuery. Once you add jQuery you can see the demo works. I have added separate background colors so you can see the change better. Simple replace the background color with and image.
/* START OF EDIT */
* {
color: #ffffff !important;
}
#main {
transition: background 0.3s;
position: relative;
background: transparent;
}
.tab-background {
height: 100%;
width: 100%;
background: #ff9000 no-repeat center center / cover;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
transition: opacity 0.6s;
position: absolute;
}
li.active .tab-background {
opacity: 1;
}
/* END OF EDIT */
.page-section {
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.page-section.page-section-center {
align-content: center;
text-align: center;
}
.page-section.page-section-lg {
padding-top: 50px;
padding-bottom: 50px;
}
.page-section.page-section-white {
background-color: #fff;
}
}
.help-nav-tabs .nav-tabs {
font-size: 16px;
}
.help-nav-tabs .nav-tabs > li.active > a {
background-color: transparent !important;
border: 0px transparent solid !important;
font-weight: 500 !important;
}
.help-nav-tabs .nav-tabs a {
border-bottom: 4px solid #2db2e9 !important;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a {
border-bottom: 0px transparent solid !important;
color: #32404E;
font-weight: 400;
-webkit-transition: color ease 0.3s;
-o-transition: color ease 0.3s;
transition: color ease 0.3s;
}
.help-nav-tabs .nav-tabs.nav-justified > li > a:hover {
background-color: transparent !important;
border: 0px !important;
color: #50667d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<section id="main" class="page-section page-section-xlg page-section-center page-section-white help-nav-tabs page-section-no-bd">
<div class="container">
<div class="col-md-offset-2 col-md-8">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="help-tabs">
<li class="active">
<div class="tab-background" style="background-image: url(http://www.animalfactguide.com/wp-content/uploads/2015/09/sloth4_full.jpg);"></div>
<a href="#how-ot-maintenance" data-background-color="white" data-toggle="tab" aria-expanded="true" data-no-scroll>
Maintenance
</a>
</li>
<li class="">
<div class="tab-background" style="background-image: url(http://www.euclidlibrary.org/images/tickle-your-brain/slotheatingleaf.jpg?sfvrsn=0);"></div>
<a href="#how-ot-crm" data-toggle="tab" data-background-color="rebeccapurple" aria-expanded="true" data-no-scroll>
Sales & Marketing
</a>
</li>
<li class="">
<div class="tab-background" style="background-image: url(http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/Q-Z/sloth-beach-upside-down.jpg.adapt.945.1.jpg);"></div>
<a href="#how-ot-projects" data-toggle="tab" data-background-color="indianred" aria-expanded="true" data-no-scroll>
Project Management
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content wrap wrap-bt wrap-bt-lg">
<div class="tab-pane fade in active" id="how-ot-maintenance">
<h2>Control Costs</h2>
</div>
<div class="tab-pane fade" id="how-ot-crm">
<h2>Customer</h2>
</div>
<div class="tab-pane fade" id="how-ot-projects">
<h2>Take</h2>
</div>
</div>
</div>
</div>
</section>
I want the side bar menu using bootstrap.
I want to hide the menu even in the large screen by clicking the button.
When collpasing to the left side menu icons should display on the left side.
Inside the menu item by clicking it dropdown to the side.
Please tell me the solution.
I tried using the css and bootstrap and jquery. It is not working.
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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>
<div class="navbar-brand">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li>
<a href="#anch2">
<span class="fa fa-anchor solo">Anchor 2</span>
</a>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I added some jquery code and chaged this block of your code. rest of the code is same.
Also don't forget to add jquery, font-awesome, and bootstrap cdn in your code. (as included in the snippet below)
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
$(document).ready(function () {
$("a#menu-toggle").click(function (){
$("#wrapper").toggleClass("active");
});
});
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
.dropdown,.sidebar-nav,#id,#sidebar-wrapper{
overflow:visible;
}
.dropdown>.dropdown-menu{
position:absolute;
top:0;
left:100%;
z-index:100;
background-color:black;
margin:0;
padding:0;
border:none;
border-radius:0;
}
.dropdown>.dropdown-menu>li>a{
line-height:45px;
color:white;
background-color:black;
}
.dropdown>.dropdown-menu>li>a:hover{
background: rgba(255,255,255,0.2);
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li class="dropdown">
<span class="fa fa-anchor solo">Anchor 2</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>