I have a sidebar menu that's built using Bootstrap 4. To create a submenu that expanded right utilizing jQuery. It looks like this:
<div class="container-fluid">
<div class="row">
<nav class="col-md-1 d-none d-md-block sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center flex-column sidebar" href="#" data-toggle="collapse" data-target="#submenu" aria-expanded="false" id="sidebarCollapse" >
<%= image_tag 'products.png' %>
<p>Products</p>
</a>
</li>
</ul>
</div>
</nav>
<!--Product Sidebar-->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
Main Item
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</li>
</ul>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
</main>
</div>
</div>
Then the jQuery:
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
This mostly works correctly. I click on the anchor tag of Products and the submenu/sidebar opens up to the right. However the problem is when not active it will show Bootstrap Sidebar and Main Item. How do I get it so that when not active that the sidebar has a visibility of hidden?
I've tried the following with jQuery with no luck:
$(document).ready(function () {
$('#sidebar').hide();
$('#sidebarCollapse').on('click', function (e) {
e.preventDefault();
$('#sidebar', this).toggle('active');
});
});
Do you have your CSS set up to hide it initially?
#sidebar {
display:none;
}
#sidebar.active{
display:block;
}
Related
I have a use case where i need to create a series of "cards" with tabs on top (so each card has tabs). To achieve this, I intended on having a template element which I clone and then populate. This works as expected, EXCEPT for the tabs on the cloned elements, when clicked they control the original template object instead of the current clone.
I'm assuming this is due to the event listeners that have been cloned are still connected to the original object? Is there some way to disconnect them and ensure they point and at the newly cloned objects?
Example code below...
document.querySelector("#add_card").addEventListener("click", add_card);
function add_card() {
let clone = document.querySelector('.mytab.template').cloneNode(true)
document.querySelector('#card_list').appendChild(clone);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<button type="button" class="btn btn-primary" id="add_card">Add Card</button>
</nav>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-4 mb-4 text-left" id="card_list">
<div class="col mytab template">
<div class="card mb-4 rounded-3 shadow-sm ">
<div class="card-header">
<ul class="nav nav-tabs card-header-pills nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="true" data-bs-toggle="tab" href=".one">one</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href=".two">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane one active">
<h1>ONE</h1>
</div>
<div class="tab-pane two">
<h1>Two</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
The bottom line is that tab targets must have unique identifiers. You'd have the same problem if you were to duplicate the markup itself. Here's how you might do that. Notice that I've moved the template to simplify the operation.
let iterator = 0;
document.querySelector("#add_card").addEventListener("click", add_card);
function add_card() {
let clone = document.querySelector('.template').cloneNode(true);
// add unique classes to each pane element
clone.querySelectorAll('.tab-pane').forEach((el, i) => {
el.classList.add('tab_' + iterator + i);
});
clone.querySelectorAll('.nav-link').forEach((el, i) => {
// update href attributes on each tab element to match panes
el.setAttribute('href', '.tab_' + iterator + i);
// initialize Bootstrap tabs on each tab element
const tab = new bootstrap.Tab(el)
el.addEventListener('click', event => {
event.preventDefault();
tab.show();
})
});
// append the clone
document.querySelector('#card_list').appendChild(clone);
// show the clone
clone.classList.remove('d-none');
iterator++;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<button type="button" class="btn btn-primary" id="add_card">Add Card</button>
</nav>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-4 mb-4 text-left" id="card_list">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm ">
<div class="card-header">
<ul class="nav nav-tabs card-header-pills nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="true" data-bs-toggle="tab" href=".one">one</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href=".two">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane one active">
<h1>ONE</h1>
</div>
<div class="tab-pane two">
<h1>Two</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div class="col template d-none">
<div class="card mb-4 rounded-3 shadow-sm ">
<div class="card-header">
<ul class="nav nav-tabs card-header-pills nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="true">one</a>
</li>
<li class="nav-item">
<a class="nav-link">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane active">
<h1>ONE</h1>
</div>
<div class="tab-pane">
<h1>Two</h1>
</div>
</div>
</div>
</div>
Intro
I'm using Bootstrap 5 (bundled with webpack 5), with his grid system and the collapse function to create the home page to this site, that has 2 sidebars that collapse into a topbar.
When we get to a mobile format the navs collapse and the columns containing them stack up leaving the 3rd col with the logo at the bottom without overflowing the parent.
Look at my 100% accurate ms paint graphics to understand better
Issue
When we show the collapsed navs, the columns containing them push the 3rd col with the logo out of the row and the container-fluid containing it.
Question
How can i make the navs expanding without pushing the logo? (to clarify the logo needs to stay below the navs
ms paint 100% accurate graphics
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 order-0 my-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand brand d-lg-none" href="#"
><b>ENV</b>Productions</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul
class="navbar-nav flex-column justify-content-between text-center text-lg-start"
>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SEVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-10 order-lg-1 order-last my-auto text-center">
<a class="navbar-brand brand d-none d-lg-block" href="#"
><b>ENV</b>Productions</a
>
<img
src="assets/img/BG_ENV_MONO-800px.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-1 order-lg-2 my-auto">
<nav class="navbar navbar-expand-lg">
<div
class="collapse navbar-collapse justify-content-end"
id="navbarResponsive"
>
<ul
class="navbar-nav flex-row flex-lg-column justify-content-around justify-content-lg-between"
>
<li class="nav-item text-center">
<a
href="https://www.instagram.com/env.productions/?hl=it"
target="”_blank”"
><i class="fa fa-instagram fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.youtube.com/channel/UCIloBELeZR4x8jmrhIQXQCw/featured"
target="”_blank”"
><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.facebook.com/env.productions/"
target="”_blank”"
><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.linkedin.com/company/env-productions/"
target="”_blank”"
><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
I solved this by making the logo a background-image and merging the collapsible elements under the same parent with js.
There's probably a better solution though and maybe one that let you have the image at a block/inline level.
I get this Dev Console error message "Cannot read property 'children of null" while I'm trying to use a dropdown button with Nav Tabs in Navbar Component.
when I click on the dropdown item to display nav-link in navbar I get this Dev Console error message "Cannot read property 'children of null"
Live Example: https://codepen.io/themes4all/pen/bGWjMzZ
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false">
Example 02
</button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Tabs (data-bs-toggle="tab") should be contained inside a nav nav-tabs...
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu nav nav-tabs" aria-labelledby="dropdownEx">
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true"> Example 01 </button>
</li>
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false"> Example 02 </button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Demo
Caveat: This is not the intended use of Bootstrap Tabs and Dropdowns. Dropdowns aren't designed used to toggle Tabs, and Tabs aren't meant to be used in the Navbar.
This doesn't describe why it's happening, but if you would like a solution.
Remove some of the attributes associated with the dropdown list item buttons (see below for example). Depending on what you want to do, you can either set up JavaScript event listeners for those buttons. Or you can change the buttons to anchor tags and navigate to a different page.
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item">
Example 02
</button>
</li>
</ul>
</div>
"Leaf" menu items like Example 1 and Example 2 should not contain data-bs-toggle="dropdown"
I have some tabs using bootstrap 4. In the tab with id "mytabs" I have other two tabs inside it. And in this tabs inside "#mytabs" that is an issue. If I click in the "tab1" link it appears the content of the tab1 but if I click in the "tab2" link it still appears the content of the "tab1".
Do you know where is the issue?
Fiddle with issue: https://jsfiddle.net/cv25swga/8/
HTML:
<body>
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="row mt-3">
<div class="col-12">
<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
<!-- other tab links -->
<li class="disabled">
<a class="nav-link" href="#mytabs" data-toggle="tab" role="tab">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="d-none d-lg-inline-block">Access Data</span>
</a>
</li>
</ul>
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane clearfix fade" id="mytabs" role="tabpanel"
aria-labelledby="contact-tab">
<div class="d-flex mb-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active border" id="tab1" href="#tab1"
data-toggle="tab"
role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link border" id="tab2" href="#tab2"
data-toggle="tab" role="tab">tab2</a>
</li>
</ul>
</div>
<div class="tab-content bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
aria-labelledby="home-tab">
tab1
</div>
<div class="tab-pane fade show clearfix" id="tab2" role="tabpanel"
aria-labelledby="home-tab">
tab2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
This is caused by the fact both your tabs and the links have the same ID.
Change your IDs up so that they are unique on the page and the problem will disappear.
I'm using bootstrap latest version.
I create a main menu like this:
This is the code for in my html view:
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-folder-close"></span>
<p>header Menu 1</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-flash"></span>
<p>header Menu 2</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-list-alt"></span>
<p>header Menu 3</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-home"></span>
<p>header Menu 4</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-wrench"></span>
<p>header Menu 5</p>
</button>
</div>
</div>
</div>
</div>
Now I would like, when user scrolling, change this menu into a fixed to top navbar like this (check the link to have a better idea, scroll to see the animation):
this is the code for the nav fixed to top:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dropdown-thumbnail-preview">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="dropdown-thumbnail-preview">
<ul class="nav navbar-nav">
{# Suivis Fluides #}
<li class="dropdown thumb-dropdown">
Header Menu 1 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Suivis Contrats #}
<li class="dropdown thumb-dropdown">
Header Menu 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Patrimoines #}
<li class="dropdown thumb-dropdown">
Header Menu 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Equipements Technique #}
<li class="dropdown thumb-dropdown">
Header Menu 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# User #}
<li class="dropdown thumb-dropdown navbar-right">
Menu Header 5 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The purpose of this question is to render my main menu into a navbar fixed to top when user is scrolling.
Anybody knows what is the best solution and to make this?
You could use something like Prinzhorn/skrollr or imakewebthings/waypoints to define, when (talking about scroll position) to add/remove a class which makes the navbar sticky.
You can do something like below if you have an option of including jquery
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) //Change this value 280 as per your need
{
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
Considering the structure of each navigation is different, I would suggest hiding/showing each element with a css class of hidden. Then it's just a matter of adding/removing that class when the first nav is scrolled equal to or passed the top of the viewport.
The jQuery would look something like this:
//Fired when the page is scrolling
$(window).scroll(function() {
var window = $(this);
//Create a reference to both navigations
var buttonNav = $('#buttonNav');
var fixedNav = $('#fixedNav');
if(window.scrollTop() >= buttonNav.offset().top) {
//Hide the buttonNav and Show the fixed nav
buttonNav.addClass('hidden');
fixedNav.removeClass('hidden');
} else {
//The opposite
fixedNav.addClass('hidden');
buttonNav.removeClass('hidden');
}
}
Keep in mind that you will need to add id's to each nav in order to reference them with jQuery and the hidden class just needs the css property display: none; in it. Hope this helps :)
Thanks to you all , I found a solution for my project, following the specification of my clients.
First, I add an id to the button nav, named firstMainMenu. Then, I add an id for the navbar named secondMainMenu. I add an hidden class for the navbar and make the script.
This is the script for:
$(window).scroll(function() {
if ($(this).scrollTop()>222) {
$('#secondMainMenu').removeClass('hidden').fadeIn();
$('#firstMainMenu').addClass('hidden').fadeOut('fast');
} else {
$('#secondMainMenu').fadeOut('fast');
$('#firstMainMenu').removeClass('hidden').fadeIn('slow');
}
});
This is the code who works for me. But the three answer are right too. Tahnk you to all of you for your suggestions. You are the best.
Don't hesitate if you have suggestions or edits for this script.