This has been wreaking my head all day and before I give up I thought I'd see if anyone could help me out.
I have a sticky header that moves down the page when scrolled. I'm using bootstrap and have two classes in one div - navbar for the regular view and navbarSticky for the sticky effect when scrolled.
The problem is when I have both classes in the div, the navbar class completely disappears but navbarSticky works and navbar will only return when the navbarSticky class is deleted from the div. I was thinking it must have something to do with CSS - navbarSticky having more precedence over navbar.
I would really appreciate it if someone could help me out.
This is my navbar :
<div class="navbar navbarSticky navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="row">
<div class="logo col-xs-6 col-md-6">
<ul class="pull-left">
<li>Theme</li>
</ul>
</div>
<div class="nav col-xs-6 col-md-6">
<ul class="pull-right">
<li>Home</li>
<li class="dropdown">
Products
<ul>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
</ul>
</li>
<li>Services</li>
<li>Join</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu-button col-xs-6 col-md-6">
<ul class="pull-right">
<li>
<button id="menu-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>
</li>
</ul>
</div>
</div>
</div>
<div id="nav-dropdown" class="nav-dropdown col-xs-12 col-md-12">
<ul>
<li id="form">
<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>
</li>
<li>Home</li>
<li class="dropdown">
Products
<ul>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
</ul>
</li>
<li>Services</li>
<li>Join</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
This is my jquery
$(window).scroll(function (){
if($(window).scrollTop() > 65)
{
$("navbar").addClass('navbarSticky');
$(".navbarSticky").css({
'display':'block'
})
}
else{
$("navbar").removeClass('navbarSticky');
$(".navbarSticky").css({
display:'none'
})
}
});
This is my css
.navbar
{
background: #ffffff;
color: #2d3238;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 100px;
}
.navbarSticky
{
background: #ffffff;
box-shadow: 1px 5px 15px #ccc;
color: #2d3238;
display: none;
top: 0;
height: 100px;
left: 0;
right: 0;
position: fixed;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
z-index: 9999;
}
Update:
I Finally have it working, i just needed to change navbar in jquery to .navbar but now i have some wierd jumping down effect of the navbarSticky when it crosses over from the navbar. Could someone help?
navbarSticky overwrites every property on navbar. It isn't that the navbar class disappears, it is that none of it's own css properties dominate so you see none of it until the dominating navbarSticky class has been removed.
Related
I have tried and searched the internet dry without any solution to my problem. I have created an list in which I modified to be located off the main screen as a slide-in menu using transform: translate (-100%). When the main navbar collapses into the mobile button, I intend to assign a jQuery function to the button in order to slide-in the offcanvas menu. However, the button does not respond no matter what and I need some aid. Any help is greatly appreciated!
/..The main navbar../
<nav class="main-navigation" role="navigation">
<ul>
<li class="products1">Products</li>
<li class="store1">Store</li>
<li class="about1">About Us</li>
<li class="discover1">Discover</li>
<li class="support1">Support</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
/..The button that dosen't work../
<button class="navbar-toggle pro-toggle pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
/..The menu that I want to slide in but dosen't work../
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
/..The main CSS for the slide-in menu../
<style>
.main-navigation {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
text-decoration: none;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.main-navigation.open {
transform: translateX(0);
}
</style>
/..The jQuery function that is supposed to slide-in the menu../
<script>
$(document).ready(function() {
$('.pro-toggle').on('click', function(){
${'.main-navigation').toggleClass('open');
});
});
</script>
change
from ${'.main-navigation') to $('.main-navigation').
I am trying to create an Offcanvas Left nav bar that can be brought into view on button click.
Currently it opens fine but when it closes the top navigation of the page is very jumpy and closes instantly without an animation.
The left bar also overlaps the footer and the footer doesn't move the way it should like the top nav bar.
Bootply
Added -webkit-transition: all 1s ease; to the footer and wrapper class, because everything has to be animated.
I set overflow hidden on html, body selector, this is a fix for the jumpy footer.
The only thing left to do now is adding two lines in your javascript:
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
and
(".footer").css('-webkit-transform', 'translate(0, 0)');
I'm no expert so feel free to correct me, but i think it works the way you want it to.
$(document).ready(function() {
var menu = "close";
$(".menuToggle").click(function() {
if (menu == "close") {
$(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
$(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
menu = "open";
} else {
$(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
$(".wrapper").css('-webkit-transform', 'translate(0, 0)');
$(".footer").css('-webkit-transform', 'translate(0, 0)');
menu = "close";
}
});
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
position: fixed;
width: 20%;
left: 0;
overflow: hidden;
background-color: green;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
background-color: black;
}
.menuToggle .navbar-toggle {
display: block;
float: left;
border: 1px solid gray;
margin-left: 5px;
margin-top: -10px;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
-webkit-transition: all 1s ease;
}
footer,
.push {
min-height: 40px;
height: auto;
}
.footer {
color: white;
-webkit-transition: all 1s ease;
}
<div class="leftNavbar">
<h2>Sidebar menu</h2>
<nav>
Home
About
Contact
Prices
</nav>
</div>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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">
<img id="logo" src="Logos/LetterHillustrator.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Services
</li>
<li>Our Prices
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!--------SIDE NAVBAR-------->
<!--<div class="leftNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><span class="glyphicon glyphicon-chevron-right"></span> Home</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 1</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 3</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 4</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 5</li>
</ul>
</div>-->
<!-----SIDEBAR------->
<div class="menuToggle">
<button class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="push"></div>
</div>
<footer class="footer navbar-inverse">
<div class="container">
<h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info#GoodHome.co.uk</h6>
</div>
</footer>
Trying to get a nabber brand image to be displayed. Working fine across Chrome/Safari/IE but not in FF. When the user scrolls up, the brand image grows.
http://sam-stone.co.uk/sam/
I have tried making the image static but that does not show either. Any ideas?
CSS:
.navbar-brand img {
max-height: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
margin-top: -75px;
-webkit-filter: drop-shadow(0px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
}
.shrink .navbar-brand img {
max-height: 100px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
JS:
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('shrink');
}
else {
$('.navbar').removeClass('shrink'); }
});
HTML:
<nav class="navbar navbar-default navbar-fixed-top normal" role="navigation">
<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" href="#"><img src="images/logoCircle.png" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-top-right">
<li>
<form action="demo_form.asp">
<input type="text" class="form-control empty" id="iconified" placeholder=" Search Blog" style="font-family:Arial, FontAwesome">
<br>
</form>
</li>
<li><img src = "images/sample.png"> Samples (0 Samples)</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>SHOWCASE</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
Ive been trying to find out how to do this for a week and have been unable to do it. My html navbar looks like this.
<div class="maincontainer">
<!--Navbar-->
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<div class="navbar navbar-default navbar-fixed-top" 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>
<a class="navbar-brand" href="#">Pixoweb</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Examples<b class="caret"></b>
<ul class="dropdown-menu">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Js
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})
css
.affix {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
So far this has made it so that the navbar goes behind the the context and images. I would like it if someone can help me
Navbar has not gone behind the text/images, it has been 3d transformed by bootstrap affix so that it looks like it has gone behind. I assume that you want to change the background color of the navbar when it is pinned (affixed). You can use following CSS. Note: you don't need JavaScript.
.affix .navbar-default {
position: fixed !important;
top: 0 !important;
width: 100% !important;
background-color: #957595 !important;
}
.affix {
width: 100% !important;
}
I also struggled with my menu displaying behind my images, I fixed it by adding "z-index: 1;" to my nav class. eg:.navbar-inverse in the style sheet
.navbar-default {
background-color: #201f1f;
border-color: #f47d20;
border-bottom:#f47d20 5px solid;
padding-bottom:0px;
z-index: 1;
}
I've implemented twitter bootstrap on my site.I want to know how to make nav-bar responsive like one on twitter bootstrap official site.
There is problem with alignment in small size screens take a look at pic below.
HTML CODE:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" 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>
<a class="navbar-brand" href="index.php">Studyfoyer</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Learn</li>
<li>Teach</li>
<li>Discuss</li>
<li class="dropdown">
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Contact Us</li>
<li class="divider"></li>
<li>Blog</li>
<li>About</li>
<li>Contribute</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CUSTOM CSS:
.nav{
float:right;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
FYI to play with sizesmy_Site
#media queries are what you are looking for. You can find many examples, one is here