I am having troubles with Isotope on Navbar. I would like the content to be switched when selecting different Navbar items.
Not sure what do I have to do, this is simplified version of what I have for now.
I guess I need some Javascript that will handle the switching from navbar's href's to isotope's classes? Is this possible like this?
HTML Navbar
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse navbar-main-collapse" id="#options">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
</div>
</nav>
HTML Content
<section class="main-content">
<div class="isotope-elements-grid" id="isotope-elements-grid">
<div class="isotope-element home">
<p>Some random text on Home</p>
</div>
<div class="isotope-element about">
<p>Some random text on About</p>
</div>
</div>
</section>
Javascript
$('.isotope-elements-grid').isotope({
// options
itemSelector: '.isotope-element',
layoutMode: 'fitRows'
});
Related
I have a large header section for a website that is split into three sections; social links, logo, and then the navigation bar. I am trying to figure out how I can hide the top two elements and resize the navigation bar and have it fixed when the user scrolls past it.
The nav bar currently just holds a link that will open up a separate side menu that holds all of the actual page navigation.
https://jsfiddle.net/cxekxrxy/2/
<header>
<!-- social links -->
<div id="social" class="social-header">
<div class="container">
<div class="row">
<ul>
<li class="social-icon"><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="social-icon"><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
<!-- logo -->
<div id="logo" class="logo-header">
<div class="container">
<div class="row">
<h1 class="logo-main">Main Header</h1>
<h2 class="logo-sub">Sub Header</h2>
</div>
</div>
</div>
<!-- Navigation -->
<div id="header" class="main-header">
<div class="container">
<div id="bars"><span class="glyphicon glyphicon-menu-hamburger text-right" id="nav-bars" style="font-size:25px; cursor:pointer" onclick="openNav()"></span></div>
</div>
<!-- nav links (hidden until <span> is pressed) -->
<div id="main-nav" class="side-nav">
×
<span class="glyphicon glyphicon-home"> Home</span>
<span class="glyphicon glyphicon-user"> About</span>
<span class="glyphicon glyphicon-picture"> Portfolio</span>
<span class="glyphicon glyphicon-envelope"> Contact</span>
</div>
</div>
</header>
You can see this neat example for your need:
https://css-tricks.com/scroll-fix-content/
And work with your code.
This is combination CSS and JS, and a simplest solution
.
I have a navbar with a search form, where I get the results from Algolia with their autocomplete solution. This is the navbar:
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
<span></span>
<span></span>
</div>
<a href="{{ url('/') }}">
<img class="logo logo-small" src="{{ asset('/img/logo-small.png') }}" alt="logo">
<img class="logo logo-big" src="{{ asset('/img/m2.png') }}" alt="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form action="/search" method="get" class="navbar-form navbar-search-form active" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<button type="submit"><i class="ion-ios-search-strong"></i></button>
</span>
<input type="text" id="search-input" name="q" class="form-control" placeholder="Search for videos or players..." value="{{ Request::get('q') }}" autofocus>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Sign in
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On small screens I have a problem, that the results are inside of the navbar dropdown menu
Where I would like them to go over the dropdown menu. I have tried with setting the z-index for various elements of algolia dropdown:
.algolia-autocomplete {
z-index: 999999 !important;
}
But that didn't work, not sure where exactly should I change the z-index, since the element is created on autocomplete so I am not able to see the structure before I type in something. How can I fix that?
The problem was in the bootstrap class:
.navbar-collapse.in {
overflow-y: auto;
}
I had to change it to overflow-y: visible; and then it worked.
I am trying to implement a fixed side menu that updates the active page link with the active class. I placed the scroll spy HTML5 elements on the body, but I am having issues. Can someone checkout my html file and see if they can determine what's wrong and provide me some solutions to this problem?
Here is the link to my github account for this: https://github.com/thlee1122/profile
Here is how my current navigation section in the html file look like:
body data-spy="scroll" data-target="#navbar-example">
<div class = "header">
<div class = "container">
<div class="video-section">
<video autoplay muted loop>
<source src="macbook.mp4" type="video/mp4">
</video>
<div class="section-content container">
<h1>Tae Hoon Lee</h1>
<hr></hr>
<h4>Interactive Portfolio</h4>
<!--<p><a class="btn" href="#">Email Me</a></p>-->
</div>
</div>
</div>
</div>
<div class="main" id="profile-intro">
<div class="container">
<h1>Profile</h1>
<h3>I'm a creative Front end developer.</h3>
<hr></hr>
</div>
</div>
<div id="top" class="jumbotron">
<a href="#profile" class="scroll-down">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<div class="navbar navbar-default" id="navbar-example" role="navigation">
<div>
<div class="navbar-header"></div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">
Profile
</li>
<li class>
Experiences
<li>
<li class>
Skills
</li>
<li class>
Projects
</li>
<li class>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
I think I have it working! I'm gonna submit I pull request to your github.
I tried this link solution but not able to conclude. I am new to this..tried everything but all vain I want something like this what to do
check this How to close collapse panel when we click link inside the panel in bootstrap
my code:
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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 href="#" class="btn btn-default" data-toggle="collapse" href="#collapse1">
<i class="material-icons" style="font-size:53px;">menu</i>
</a> -->
<!-- ****** -->
<div class="navbar navbar-default navbar-static-" role="navigation">
<div class="container">
<button class="btn btn-default" data-toggle="collapse" data-target="#menu"><span class="material-icons" style="font-size:40px;">menu</span></button>
</div>
</div>
</div>
<!-- Menu -->
<div id="menu" class="panel panel-default panel-collapse collapse bottom padding">
<div class="container collapse navbar-collapse" id="myNavbar">
<ul class="bottom padding list-inline">
<li>ABOUT US / </li>
<li><a href="#services" >SERVICES</a> / </li>
<li>HOTELS / </li>
<!--<li>PRICING</li>-->
<li>CONTACT</li>
</ul>
<div class="container bottom padding">
<div class="row">
<div class="text-center">
<p class="white">Some of our partner hotels</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Hilton Grosvenor House</h3>
<p>The definition of luxury</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Marriott</h3>
<p>Service paradise</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Ramada</h3>
<p>For the business traveller</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center padding padding">
<img src="images/TTB_Logo_small.png"/>
<h1>Tourists Travel Bureau UK Limited</h1>
</div>
</div>
and javascript:
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});</script>
To the link or the button give
data-target = "#idofthepanel"
Refer to the panel using id instead of class
Also,
You have given data-target="#mynavbar" , but navbar is a class and not an id.
I've searched and searched and can't seem to find my issue. I apologize if this is answered somewhere else. I inherited a "simple" site that needs scrollspy implemented and I can't get anything to work for the life of me.
Here are some excerpts from the code:
HTML NAV
<div class="row" style="width:100%" id="topnav">
<nav id="anchored" role="navigation">
<ul class="nav top-menu fade-in">
<li class="mission_anchor">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</nav>
</div>
<br />
SAMPLE OF FIRST "SERVICES DIV"
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>HOW SUPER AGENT MARKETING CAN HELP YOUR AGENTS</h1>
<br />
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#topnav").on("activate.bs.scrollspy", function(){
alert('smomething happened')
});
$('#topnav').affix({
offset: {
top: 0
}
});
$('body').scrollspy({ target: '#topnav' });
<br />
Full demo site can be found here:Demo Site
Any help would be greatly appreciated as I'm sure it is probably something minor I am overlooking but haven't been able to find in 6 hours of playing with it.
in order to use bootstrap scrollspy your navigation have to be as bootstrap's navigation .
build your NAV as this link below and it will work
http://getbootstrap.com/components/#navbar
try the below example.
$(function(){
$('body').scrollspy({ target: '#myNav' })
})
section > div[id]{
height:800px;
padding-top:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav id="myNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="mission_anchor active">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Services Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="about" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>About Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="demo" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Demo Section</h1>
</div>
</div>
<section>