I'm having a problem with the following piece of code.
<header style="position: fixed; z-index: 999999; width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top" style=" position: relative; margin-bottom:0;">
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-3">
<a class="navbar-company" href="http://www.premiersoftware.co.uk"> </a>
</div>
<div class="col-xs-12 col-sm-9 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-product" aria-expanded="false" aria-controls="navbar">
<span class="caret"></span>
</button>
</div>
<div id="navbar-product" class="navbar-collapse collapse mainlist">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Products<span class="caret"></span>
<ul class="dropdown-menu">
<li>Salonlite</li>
<li>Premier Salon</li>
<li>Premier Spa</li>
<li>Core by Premier Software</li>
<li>College by Premier Software</li>
</ul>
</li>
<!--<li>
About Us
</li>-->
<li>
Careers
</li>
<li>
Partners
</li>
<li>
Support
</li>
<li class="dropdown">
News<span class="caret"></span>
<ul class="dropdown-menu">
<li>Premier News</li>
<li>Premier Blog</li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle grey" href="javascript:;" data-toggle="dropdown" id="navLogin">Login<span class="caret"></span></a>
<div class="dropdown-menu">
<h4 class="logintxt">Client Login</h4>
<p class="logintxt">Premier Softwares client login area allows you to manage your online premier web booking.</p>
<form class="form" id="dologin" action="../Web-Portal/doLogin.php" method="post">
<input name="txtSerial" id="txtSerial" class="form-control" type="text" placeholder="Serial number">
<input name="txtPostCode" id="txtPostCode" class="form-control" type="text" placeholder="Postcode">
<button type="submit" id="login-submit" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default product-nav-bar">
<div class="container">
<div class="row">
<div class="col-md-push-3 col-sm-push-3 col-lg-push-2 remove-padding-and-center col-xs-3 col-lg-3">
<a class="call" href="tel:01543466580">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>01543 4666580</div>
</a>
</div>
<div class=" col-xs-6 col-sm-3 col-lg-2 col-md-pull-3 col-sm-pull-3 col-lg-pull-3">
<a class="navbar-brand" href="#"> </a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-push-2 nav-small">
<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>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="book-consultation-nav">
<a href="#contact-us" class="scroll-to" >Book a FREE Consultation</a>
</li>
<li class="nav-small-contact-us">
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
<li>
<a class="scroll-to" href="#marketing">Overview</a>
</li>
<li>
<a class="scroll-to" href="#features">Key Features</a>
</li>
<li>
<a class="scroll-to" href="#additional-reasons">In-Depth</a>
</li>
<li class="nav-small-brochure">
<a class="scroll-to" href="#brochure">View Core Brochure</a>
</li>
<li>
<a class="scroll-to" href="#casestudies">Testimonials</a>
</li>
<li>
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="hidden-xs col-lg-pull-5 col-sm-12 col-lg-2">
<a class="btn btn-primary book-consultation scroll-to" href="#contact-us" role="button">Book a FREE Consultation</a>
</div>
</div>
</div>
</nav>
</header>
<script>
$(".scroll-to").on('click', function(event)
{
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -153
}, 800, function(){
window.location.hash = hash;
});
}
});
</script>
I'm using bootstrap and have two collapsible navigation on top of each other. When I select on of the options in the lower navigation in smaller screens (ie mobile screens), the top navigation opens.
To see this in action please visit:
http://www.premiersoftware.co.uk/corebypremier/index9.php
Really I would just like the lower navigation animate the page without the top one opening.
Any suggestions would really be appreciated.
Thanks
Dan
Related
please refer "https://codepen.io/anon/pen/XbBPPY" i want same result but instead of using bootstrap-3, i want to use bootstrap-4.
U can see the code in the reference link "https://codepen.io/anon/pen/XbBPPY"
HTML
<div class="container-fluid">
<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="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active">Link</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
<li class="dropdown">
Drop-Down Menu<i class="fa fa-angle-down flipped"></i>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<i class="fa fa-microphone fa-2x"></i>Option
</li>
<li class="nav-link">
<i class="fa fa-newspaper-o fa-2x"></i>Option
</li>
</ul>
</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>```
I've been trying to replicate the icons part in the navigation bar on this website https://www.vannuysmaserati.com/
This is what I have so far. I'm not using icons yet. I would like the dropdowns to use one dropdown menu not have one for each.
https://codepen.io/dmads2355/pen/bQPgbJ
<br>
<br>
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<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://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
P <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>phone</p>
</ul>
</li>
<li class="dropdown">
H <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>Hours</p>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
Thanks
I want to use navigation on same page using sections (#sections) it is working fine on all devices except xs devices when i click any navigation link on mobile it is going to the exact section but the navigation options is not closing or collapsing (because target link in the same page)
i am using bootstrap navigation
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav" >
<li><a class="scroll" href="#home"><i class="fa fa-home"></i>Home</a></li>
<li><a class="scroll" href="#about"><i class="fa fa-cog"></i>About us</a></li>
<li><a class="scroll" href="#products"><i class="fa fa-cubes"></i>Products</a></li>
<li><a class="scroll" href="#gallery"><i class="fa fa-camera-retro"></i>Gallery</a></li>
<li><a class="scroll" href="#contact"><i class="fa fa-pencil"></i>Contact Us</a></li>
</ul>
</div>
</div>
</nav>
when i click navigation option on mobile navigation should close & it should takes me to the exact section how can i do that ?
You can achieve this by using jquery
$('.nav li a').click(function(e) {
$('.navbar-toggle').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav" >
<li><a class="scroll" href="#home"><i class="fa fa-home"></i>Home</a></li>
<li><a class="scroll" href="#about"><i class="fa fa-cog"></i>About us</a></li>
<li><a class="scroll" href="#products"><i class="fa fa-cubes"></i>Products</a></li>
<li><a class="scroll" href="#gallery"><i class="fa fa-camera-retro"></i>Gallery</a></li>
<li><a class="scroll" href="#contact"><i class="fa fa-pencil"></i>Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div id="home" style="height:500px;"></div>
<div id="gallery" style="height:500px;"></div>
<div id="contact" style="height:500px;"></div>
<div id="home" style="height:500px;"></div>
<div id="gallery" style="height:500px;"></div>
<div id="contact" style="height:500px;"></div>
I have a problem in my burger menu. It is not hiding after I click on the menu. I'm a beginner and I don't know where the problem is?
I need your help please. If you need any other information about my code feel free to ask me.
<nav id="navbar" class="navbar default">
<div class="container mob-logo">
<div class="navbar-header col-sm-2 tablet-logo">
<button type="button" class="navbar-toggle mob-menu" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
</button>
<div class="mobile-sidebar">
<span class="sidebar-btn btn fa-bar-hide" data-action="toggle" data-side="right" >
<i class="fa fa-bars"></i>
</span>
</div>
</div>
<div class="collapse navbar-collapse " id="myNavbar" >
<ul class="nav navbar-nav pull-right ">
<li class="active">
<a href="#accueil" data-du-smooth-scroll data-du-scrollspy>Accueil</a>
</li>
<li class="active">
<a href="#home" data-du-smooth-scroll data-du-scrollspy>Groupe</a>
</li>
<li>
<a href="#Competences" data-du-smooth-scroll data-du-scrollspy>Competences</a>
</li>
<li>
<a href="#Services" data-du-smooth-scroll data-du-scrollspy>Services</a>
</li>
<li>
<a href="#References" data-du-smooth-scroll data-du-scrollspy>References</a>
</li>
<li>
<a href="#contact" data-du-smooth-scroll data-du-scrollspy>Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
$(".mob-menu").click(function(){
$(this).hide();
});
});
I've built a nav menu using expand and collapse in and not using a dropdown. My problem is that I can't get the div to toggle when I click a menu link. I've tried using js to toggle it closed when a link is clicked, but then I can't re-open the menu again.
Here's my html:
<header style="padding:0px 0%;">
<nav class="navbar navbar-inverse navbar-static-top" style="margin:0px 0px;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header hidden-md hidden-lg">
<button type="button" class="navbar-toggle collapsed hidden-sm hidden-xs" data-toggle="collapse" data-target="#myNavmenu" aria-expanded="true" style="color:#fff;display:inline-block;">
<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">
<ul class="nav navbar-nav navbar-right inverse hidden-xs hidden-sm" style="margin:0px 0px; font-size:0.8em;">
<li style="float:left !important"><img src="/products/greg2/images/avatierwatermark.png" style="height:34px; width:auto;"></li>
<li>Customers</li>
<li>Solutions</li>
<li>Products</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="collapse" id="expandmenu">
<div class="well">
<div class="container">
<button type="button" class="navbar-toggle2 pull-right" data-toggle="collapse" href="#expandmenu" aria-expanded="false" aria-controls="collapseExample" style="float:right; padding:16px 5px 17px 0px; color:#333;"><p class="explore" style="font-size:0.8em; color:#333;">Close </p>
<span class="glyphicon glyphicon-remove" aria-hidden="true" style="font-size:1.1em;"></span>
</button>
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="row">
<ul class="expand txt-ctr" style="padding-left:0px;">
<li class="blue"><div style="background-position:0px 0px;"></div><span>Benefits</span></li>
<li class="blue"><div style="background-position:-165px 0px;"></div><span>Overview</span></li>
<li class="blue"><div style="background-position:-330px 0px;"></div><span>Features</span></li>
<li class="blue"><div style="background-position:-495px 0px;"></div><span>Reports</span></li>
<li class="blue"><div style="background-position:-660px 0px;"></div><span>Security</span></li>
<li class="blue"><div style="background-position:-825px 0px;"></div><span>Help Desk</span></li>
<li class="blue"><div style="background-position:-990px 0px;"></div><span>App Support</span></li>
<li class="blue"><div style="background-position:-1155px 0px;"></div><span>Architecture</span></li>
<li class="blue"><div style="background-position:-1315px 0px;"></div><span>Languages</span></li>
<li class="blue"><div style="background-position:-1490px 0px;"></div><span>Ticketing</span></li>
<li class="blue"><div style="background-position:-1665px 0px;"></div><span>Testimonials</span></li>
<li class="blue"><div style="background-position:-1825px 0px;"></div><span>Demo</span></li>
<li class="blue"><div style="background-position:-1998px 0px;"></div><span>Resources</span></li>
<li class="blue"><div style="background-position:-2165px 0px;"></div><span>True Cost</span></li>
</ul>
</div>
</div>
</div>
</div>
And here's the js I've tried:
$('.collapse a').click(function(){
$("#expandmenu").toggle();
});
Thank you for your help!
Try this, it worked for me:
$('#expandmenu a').click(function(){
$("#expandmenu button").click();
});