I am trying to create fixed top navigation when scroll the window and from the point when top area becomes invisible. I did it but I have problem with body padding top when top area becomes visible again. Padding is added automatically to body, but should not, need only to be applied when navbar has an fixed-top class. See the picture (when top area becomes visible)
How to fix that problem with padding?
Site is live here
JavaScript
//FIXED NAVBAR ON SCROLL
$(document).scroll(function(event) {
var wintop = $(window).scrollTop(); // Winodw Scroll Positon
var topArea = $('.top-area').outerHeight(); // Header Logo Div Height
if (wintop > topArea) {
$('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
$('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height")) + 1);
} else {
$('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
}
});
I have bootstrap navigation (navbar navbar-default) which is below top-area on site, this is code
<div class="top-area">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<p class="address">Maršala Tita br. 54, Gložan 21412, Srbija</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 information text-right">
<ul class="contact">
<li class="email">support#uram.co.rs
</li>
<li class="telephone">+381 21 788 584</li>
<li class="fax">+381 21 788 584</li>
</ul>
<ul class="social">
<li>
<a href="http://www.facebook.com" target="_blank" title="Pratite nas na Facebook-u">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.plus.google.com" target="_blank" title="Pratite nas na Google plus">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.twitter.com" target="_blank" title="Pratite nas na Twitter-u">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.vimeo.com" target="_blank" title="Pratite nas na Vimeo">
<i class="fa fa-vimeo" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.youtube.com" target="_blank" title="Pratite nas na YouTube">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="http://mile.x3.rs/mile/uram/" title="Uram System - Dobrodošli">
<img src="http://mile.x3.rs/mile/uram/img/logo.jpg" alt="Uram System Logo">
</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<?php $currentPage=( basename($_SERVER[ "SCRIPT_NAME"])); ?>
<li <?php if ($currentPage=='index.php' ) { echo "class='active'"; } else {echo '';} ?>>Početna
</li>
<li class="dropdown">
O nama <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Naša kompanija
</li>
<li>Istorijat
</li>
<li>Nagrade i priznanja
</li>
<li>Rukovodstvo
</li>
</ul>
</li>
<li>Proizvodi
</li>
<li class="dropdown">
Reference <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Fabrika Knjaz Miloš, Aranđelovac
</li>
</ul>
</li>
<li class="dropdown">
Partneri <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Partner 1
</li>
<li>Partner 2
</li>
<li>Partner 3
</li>
<li>Partner 4
</li>
<li>Partner 5
</li>
<li>Partner 6
</li>
</ul>
</li>
<li <?php if ($currentPage=='novosti.php' ) { echo "class='active'"; } else {echo '';} ?>>Novosti
</li>
<li class="dropdown">
Download <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Download 1
</li>
<li>Download 2
</li>
<li>Download 3
</li>
<li>Download 4
</li>
<li>Download 5
</li>
<li>Download 6
</li>
</ul>
</li>
<li <?php if ($currentPage=='kontakt.php' ) { echo "class='active'"; } else {echo '';} ?>>Kontakt
</li>
<li>
<a style="visibility: visible;" class="search-button" href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- /.nav navbar-nav -->
<div style="display: none;" class="bg-white hide-show-content no-display header-search-content">
<form class="navbar-form vertically-absolute-middle">
<div class="form-group">
<input placeholder="Unesite pojam za pretragu ovde" class="form-control" id="s" name="s" value="" type="text">
</div>
</form>
<button class="close">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar navbar-default navbar-fixed-top -->
Just remove the padding-top in the else statement :
$(document).scroll(function(event) {
var wintop = $(window).scrollTop(); // Winodw Scroll Positon
var topArea = $('.top-area').outerHeight(); // Header Logo Div Height
if (wintop > topArea) {
$('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
$('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height")) + 1);
} else {
$('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
$('body').css('padding-top', '0px');
}
});
Please try this:
$(document).scroll(function(event) {
var wintop = $(window).scrollTop(); // Winodw Scroll Positon
var topArea = $('.top-area').outerHeight(); // Header Logo Div Height
if(wintop > topArea){
$('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
$('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height"))-109);
} else {
$('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
}
});
Related
I am using bootstrap 5 I have taken a sample of JavaScript that allows a pop-out sidebar open on the left with the option to close the sidebar once opened.
Inside the sidebar I have a navigation menu with menu-links (in list format)
I want it so when the user has opened the sidebar, if they decide to click to close the sidebar it will also de-collapse/close the menu lists (#submenu1, #submenu2 and #submenu3) if any and all that are open/collapsed.
I am unsure of how to achieve this in JavaScript... surely its something simple?
The javascript also makes some adjustments to the body... this does not need to be changed/effected so ignore the parts of the JS regarding body classes etc...
JS:
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
HTML:
<div class="header_toggle"> <i class="bx bx-menu" id="header-toggle"></i> </div>
<div class="l-navbar show" id="nav-bar">
<nav class="nav">
<div> <a href"="" shopuserproducts"="" class="nav_logo"> <img style="width: 30px;" src="/Images/favicon.svg"> <span class="nav_logo-name">ABC Test</span> </a>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav_link collapsed" aria-expanded="false"> <i class="bx bxs-car-mechanic"></i> <span class="nav_name">
Commercial Parts</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu1" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Suspension</span>
</li>
<li>
<span class="d-none d-sm-inline">Braking</span>
</li>
<li>
<span class="d-none d-sm-inline">Filtration</span>
</li>
<li>
<span class="d-none d-sm-inline">Engine</span>
</li>
<li>
<span class="d-none d-sm-inline">Exhaust</span>
</li>
</ul>
</li>
<li>
<i class="bx bx-spray-can nav_icon"></i><span class="nav_name">Refinish</span>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu2" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Spray Guns</span>
</li>
<li>
<span class="d-none d-sm-inline">Clearcoat Kits</span>
</li>
<li>
<span class="d-none d-sm-inline">Primers</span>
</li>
<li>
<span class="d-none d-sm-inline">Body Fillers</span>
</li>
<li>
<span class="d-none d-sm-inline">Panel Wipe</span>
</li>
<li>
<span class="d-none d-sm-inline">Tinters</span>
</li>
<li>
<span class="d-none d-sm-inline">Abrasives</span>
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav_link active" aria-expanded="true"> <i class="bx bxs-t-shirt"></i> <span class="nav_name">
PPE & Workwear</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse show" id="submenu3" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">T-Shirts & Polo's</span>
</li>
<li>
<span class="d-none d-sm-inline">Jackets</span>
</li>
<li>
<span class="d-none d-sm-inline">Hi-Visibility</span>
</li>
<li>
<span class="d-none d-sm-inline">Eye Protection</span>
</li>
<li>
<span class="d-none d-sm-inline">Headwear</span>
</li>
<li>
<span class="d-none d-sm-inline">Gloves</span>
</li>
</ul>
</li>
<hr style="color: white;">
<div class="nav_list">
<i class="bx bx-grid-alt nav_icon"></i> <span class="nav_name">Dashboard</span>
<i class="bx bx-shopping-bag nav_icon"></i> <span class="nav_name">Shop</span>
<i class="bx bx-cart"></i> <span class="nav_name">Cart</span>
<a href="/AccountManage" class="nav_link"> <i class="bx bx-user nav_icon"></i> <span class="nav_name">My
Account</span> </a>
</div>
<i class="bx bx-log-out nav_icon"></i> <span class="nav_name">SignOut</span>
</div></nav>
</div>
In small screen when I click toggle button my navbar items are appear below the search bar as shown below. I want to align the notification bell and welcome user elements just below the about like home and about .
Here is my html code
<nav class="navbar navbar-default 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">
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" 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>
<div class="nav navbar-nav pull-right">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span>Welcome, User <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-cog"></i> Preferences</li>
<li><i class="icon-envelope"></i> Contact Support</li>
<li class="divider"></li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
<div class="nav navbar-nav dropdown pull-right">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
<i class='fa fa-bell faa-ring animated fa-1x'></i>
<i class="glyphicon glyphicon-bell"></i>
</a>
<ul class="dropdown-menu notifications" role="menu" aria-labelledby="dLabel">
<div class="notification-heading"><h4 class="menu-title">Notifications</h4><h4 class="menu-title pull-right">View all<i class="glyphicon glyphicon-circle-arrow-right"></i></h4>
</div>
<li class="divider"></li>
<div class="notifications-wrapper">
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 · day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 · day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
</div>
<li class="divider"></li>
<div class="notification-footer"><h4 class="menu-title">View all<i class="glyphicon glyphicon-circle-arrow-right"></i></h4></div>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is the js code for the toggle menu. Is this problem of js or html ?
/*Menu-toggle*/
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
You can simply do it by using "hidden-xs" class and "visible-xs" class on Bootstrap
First, adding "hidden-xs" to hide them on mobile screen
<ul class="nav pull-right hidden-xs">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span>Welcome, User <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-cog"></i> Preferences</li>
<li><i class="icon-envelope"></i> Contact Support</li>
<li class="divider"></li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
</ul>
Second, copy the above code just before Home link and add "visible-xs" class to tell browser that this only show on mobile screen.
<li class="dropdown visible-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span>Welcome, User <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-cog"></i> Preferences</li>
<li><i class="icon-envelope"></i> Contact Support</li>
<li class="divider"></li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
Please read here for more information
I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">
I have a JSfiffle
https://jsfiddle.net/zuer7g75/1/
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">
Camera & photo
</a>
</li>
<li>
<a href="/cell-phones">
Cell phones
</a>
</li>
<li>
<a href="/others">
Others
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/shoes">
Shoes
</a>
</li>
<li>
<a href="/clothing">
Clothing
</a>
</li>
<li>
<a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li>
<a href="/digital-downloads">
Digital downloads
</a>
</li>
<li>
<a href="/books">
Books
</a>
</li>
<li>
<a href="/jewelry">
Jewelry
</a>
</li>
<li>
<a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()"> <div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off"
value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
Expected behaviour is like this.
1 When I click on any parent category text ( for example computers) , it should lead me to the category page.
2 when I click on the down arrow for the category it should expand and show the subcategory items
All of them works fine, But now I want to move the down arrow to right applying a style="float:right" to the element. But now my expected behaviour 2 is broken.It is leading me to the corresponding page instead of expanding the subcategory items.
What am I doing wrong here?
By floating the font awesome icons to the right instead of the actual a tags i got it to work. Only thing is i couldn't get rid of the padding at the bottom. maybe you want it there? https://jsfiddle.net/RachGal/zuer7g75/3/
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var elmnt = $(this).parent().parent();
if (!elmnt.hasClass('nav')) {
var li = $(this).parent();
var heightParent = parseInt(elmnt.css('height').replace('px', '')) / 2;
var widthParent = parseInt(elmnt.css('width').replace('px', '')) - 10;
if (!li.hasClass('open')) li.addClass('open')
else li.removeClass('open');
$(this).next().css('top', heightParent + 'px');
$(this).next().css('left', widthParent + 'px');
return false;
}
});
});
function setMouseHoverDropdown() {
if ($(window).innerWidth() > 767) {
$('ul.nav li').hover(function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
}
$(window).load(function() {
setMouseHoverDropdown();
});
$(document).ready(function() {
setMouseHoverDropdown();
});
$(window).resize(function() {
setMouseHoverDropdown();
});
.fa-angle-down {
float: right;
margin-top: -50px;
}
a.dropdown-toggle {
height: 10px;
padding-bottom: 0px!important;
line-height: 1!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".category-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="collapse navbar-collapse category-navbar-collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>
</li>
<li> <a href="/computers">
Computers
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/desktops">
Desktops
</a>
</li>
<li> <a href="/notebooks">
Notebooks
</a>
</li>
<li> <a href="/software">
Software
</a>
</li>
</ul>
</li>
<li> <a href="/electronics">
Electronics
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/camera-photo">
Camera & photo
</a>
</li>
<li> <a href="/cell-phones">
Cell phones
</a>
</li>
<li> <a href="/others">
Others
</a>
</li>
</ul>
</li>
<li> <a href="/apparel">
Apparel
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li> <a href="/shoes">
Shoes
</a>
</li>
<li> <a href="/clothing">
Clothing
</a>
</li>
<li> <a href="/accessories">
Accessories
</a>
</li>
</ul>
</li>
<li> <a href="/digital-downloads">
Digital downloads
</a>
</li>
<li> <a href="/books">
Books
</a>
</li>
<li> <a href="/jewelry">
Jewelry
</a>
</li>
<li> <a href="/gift-cards">
Gift Cards
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form action="/search" method="get" onsubmit="return check_small_search_form()">
<div class="search_box pull-right">
<input type="text" id="small-searchterms" autocomplete="off" value="Search store" name="q" onfocus="if(this.value=='Search store')this.value=''" onblur="if(this.value=='') {this.value = 'Search store';}" />
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
</body>
You can just make the a tags within the li to float left, then it should work.
.navbar-default .navbar-nav>li>a {
float:left;
}
Please change the css to be relevant to your project.
In order to get the clicking of the arrow down to work:
close all other drop downs that are currently visible.
remove the "open" class from all OTHER li.
toggle the open class from the current li that corresponds to our click.
toggle the visibility of the drop down that corresponds to our click.
Within the hover code, we also toggle the open class on the li. If a user hovers over arrow down, then we addClass open to the corresponding li. And vice versa.
Please see: https://jsfiddle.net/qynfvow3/30/
The following is a standard jQuery scroll function for nav-bar collapsing that I found on sof. For some reason, when I try to change the default speed of the header-wrap, it isn't changing. I can't figure out why. Is this a bug or am I doing something wrong?
$(document).ready(function() {
$('#header-wrap').hide();
})
var previousScroll = 0, headerOrgOffset = $('#header').height();
$('#header-wrap').height($('#header').height());
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header-wrap').slideDown( "slow", function() {
// Animation complete.
});
} else {
$('#header-wrap').slideUp();
}
}
previousScroll = currentScroll;
});
<!-- Navigation Scroll Bar-->
<div id="header-wrap">
<div id="header" class="clear">
<nav class="navbar navbar-default navbar-fixed-top" 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="#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="index.html">Start Bootstrap</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 navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>
1 Column Portfolio
</li>
<li>
2 Column Portfolio
</li>
<li>
3 Column Portfolio
</li>
<li>
4 Column Portfolio
</li>
<li>
Single Portfolio Item
</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Blog Home 1
</li>
<li>
Blog Home 2
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li class="dropdown">
Other Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Full Width Page
</li>
<li>
Sidebar Page
</li>
<li>
FAQ
</li>
<li>
404
</li>
<li>
Pricing Table
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>