I am having a bit of trouble getting my animation to play when my Bootstrap 3.3.7 navbar collapses upon scrolling from the top of the page. If I change the size of other divs in my navbar in Sublime while BrowserSync is active, it will show the animation but still doesn't work when I scroll. The example I followed was:
http://jsfiddle.net/Filo/m7yww8oa/
and recreating the problem using much of my existing code is:
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<div class="navbar-header" id="header">
<button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand" id="title"><img id="logo" src="images/logo.jpg" /></div>
</div>
<div class="collapse navbar-collapse" id="collapsable-nav">
<ul id="nav-list" class="nav navbar-nav navbar-right visible-xs visible-sm visible-md visible-lg">
<li>About US<br><i class="fas fa-users visible-md visible-lg"></i></li>
<li>Why Us<br><i class="fas fa-question-circle visible-md visible-lg"></i></li>
<li>Contact<br><i class="fas fa-envelope visible-md visible-lg"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
</header>
<div class="container-fluid" id="main">
<img src="images/goldwire1.jpg" id="goldwire1" />
</div>
<div class="container" id="services">
</div>
<div class="container" style="margin-top: 100px;">
<div class="fifty" style="float: right;"><img src="images/probe.jpg" id="probe"></div>
</div>
<div class="info" style="color: #f5f5dc; background-color: #003366;">
</div>
<script src="script.js"></script>
https://jsfiddle.net/7rqv3m8r/
I can't seem to figure out why my animation won't play. I can see in my dev tools that .shrink is added once I scroll off the top and the webkit animation is active. Any help is appreciated, thank you for taking time to check this out.
Related
I'm trying to use a bootstrap side navbar.
<nav id="sidebar" [(class.slide-in)]="slideIn" >
<div class="sidebar-header">
<img alt="Home" height="65" src="/assets/images/angular-logo.png" title="Home" width="150" class="ng-star-inserted">
</div>
<ul class="list-unstyled components">
<p>Content</p>
<li id="sidebar-list" style="border:2px;">
<a [routerLink]="['/HistoryOfAngular']">History of Angular</a>
</li>
<li id="sidebar-list">
Hello World
</li>
<li id="sidebar-list">
Data Binding
</li>
</ul>-->
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<button (click)="toggleSidebar()" style="margin:0px;border-radius: 0px; height: 50px;" type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>MENU</span>
</button>
</div>
</nav>
I am toggling the side nav with some js code in tag but the script tag doesnt run in angular 5. How could I toggle it. I thought have some code in my .ts file like
toggleSidebar():void{
}
Im not sure of what to put in it to toggle it. The code to toggle in the script tag is
<script >
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
console.log("HII");
});
});
console.log("HII");
</script>
<nav class="navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<b>
<a class="navbar-brand" href="#">
Title
</a>
</b>
<button type ="button"
class ="navbar-toggle collapsed"
data-toggle ="collapse"
data-target ="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="route1">Route1</a></li>
<li routerLinkActive="active"><a routerLink="route2">Route2</a></li>
<li routerLinkActive="active"><a routerLink="route3">Route3</a></li>
</ul>
</div>
</div>
</nav>
This is from https://bootswatch.com/darkly/
I tried making it with the bootstrap affix but it didn't work for me.
How can I make the sticky navigation bar using JavaScript and the scroll animation using CSS transition or JavaScript?
The data-spy="affix" data-offset-top=""630"> is from bootstrap.
<div class="topnavhome">
<nav class="navbar" data-spy="affix" data-offset-top="630">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-12">
<div class="logo-wrapper">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="N logo" /></a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="col-md-6 col-sm-8 col-xs-12">
<div class="social-link">
<span><i class="fa fa-phone phone" aria-hidden="true"></i> 000 000 000000</span>
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right ">
<li>Home</li>
<li>About Us</li>
<li>Supplements</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
I assume you mean the navigation bar is sticky after you scroll over the fullscreen carousel. Please correct me if I'm wrong.
To do that, you can use scroll event of the window element and check when the offset().top is higher than the screen height then only at that point, the sticky class or whatever you use to make the navbar sticky will be triggered.
I'm using Bootstrap 3 to create my wife's website. I have a fixed navigation bar at the top of my page, and want to fix a filter menu to the left hand side. I have this up and it seems to be running and working OK when the screen size is large, medium or even small, however when the -collapse menu on my top navigation kicks in the links on my filter become redundant and dont actually do anything. I'm not too sure what I've done wrong. Any ideas? I've added a jsfiddle here.
http://jsfiddle.net/iameuanmackay/mhk11q52/
Code here:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
<h1>logo</h1>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-3 col-md-7 col-md-offset-3 col-lg-6 col-lg-offset-3">
<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 active" href="index.html">home</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>portfolio
</li>
<li>blog
</li>
<li>contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- rheader -->
</div>
<!--end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
<!-- Begin page content -->
<div class="container-fluid">
<div id="portfolio">
<div class="row">
<div class="col-xs-1 col-xs-offset-1 col-sm-1 col-sm-offset-2">
<div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<ul id="filter">
<!--This is where the filter links go and and the affix seems to have gone wrong -->
<li style="list-style-type: none" class="all">all
</li>
<li style="list-style-type: none" class="people">people
</li>
<li style="list-style-type: none" class="things">things
</li>
</ul>
</div>
</div>
Any pointers would be much appreciated.
I'm using bootstrap to create a responsive navigation, and I'm using one of the icons that bootstrap provides to create a show/hide menu. The problem is that it is displaying the arrow on a different line. Is there a way to display the arrow next to the text on one line?
Here is a demo: http://jsfiddle.net/0L6g87h2/
Here's the code that is accompanied with this fiddle to make this self contained:
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-2">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Left Navigation</span>
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<nav id="leftNav" role="navigation" aria-label="Left Navigation">
<!-- TemplateBeginEditable name="Left Navigation" -->
<ul class="nav navbar-nav">
<li>Home</li>
<li><strong>Cars</strong>
</span>
<ul id="ELP">
<li>BMW</li>
<li>Honda</li>
<li>Toyota</li>
</ul>
</li>
</ul>
</nav> <!-- /Left Navigation -->
</div>
<!--/.nav-collapse -->
</div> <!--/.navbar-default -->
</div> <!--/.sidebar-nav -->
</div> <!--/.col-sm-3 col-md-3 col-lg-2-->
You can include the icon span within the a element. Updated fiddle
<a href="">
<strong>Cars</strong>
<span class="glyphicon glyphicon-circle-arrow-right"></span
</a>
You can also use bootstrap's pull-left and pull-right classes. Updated fiddle
<a href="" class="pull-left">
<strong>Cars</strong>
</a>
<a href="" class="pull-right">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
You can wrap the two elements within a span and set the span to display:inline or inline-block.
<span style="display:inline-block;">
<strong>Cars</strong>
<a href="#ELP" class="expander" >
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</span>
http://jsfiddle.net/0L6g87h2/2/
Try this...
<a href="#">
<span class="glyphicon glyphicon-chevron-right"></span> Demo
</a>
Hi I'm trying to get scroll spy working in my navigation but it's not
Here's a link to my site: http://www.saracook.coffeecup.com
Here's how I implemented it:
<body class="body" data-spy="scroll" data-target=".navbar-collapse collapse">
<div class="main">
<!--HOMEPAGE-->
<section id="home_page">
<div class="home_page">
<!--NAVBAR-->
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Seems scrollspy works good, but there is some trouble with prettyPhoto() plugin. Maybe you forget to include javascript for this plugin on the page.