Bootstrap Navbar (along with topbar) anchor tag navigates content behind the navbar
Question
I do have the topbar along with navbar with anchor tag in the same page. When I click on the anchor tag the content of anchortag does go behind the navbar. Please find below the code: HTML:
<body>
<!-- Full Body Container -->
<div id="container">
<!-- Start Header Section -->
<header id="header-wrap" class="site-header clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-8 col-xs-6">
<!-- Start Contact Info -->
<ul class="contact-details hidden-xs">
<li>
<a href="contact.html">
<i class="icon-envelope">
</i>
<span class="hidden-xs">the email address</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-call-out">
</i>
<span class="hidden-xs"> Call Us: 123456789 </span>
</a>
</li>
</ul>
<!-- End Contact Info -->
</div>
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-12">
<!-- Start Social Links -->
<ul class="social-list">
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-call-out">
</i>
</a>
</li>
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-envelope">
</i>
</a>
</li>
<li>
<a href="#" class="social-link facebook" title="Facebook" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#" class="social-link twitter" title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#" class="social-link google" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a>
</li>
<li>
<a href="#" class="social-link linkdin" data-toggle="tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
<!-- End Social Links -->
</div>
</div>
</div>
</div>
<!-- End Top Bar -->
<!-- Start Logo & Navigation -->
<div id= "fixedbar" class="navbar navbar-default navbar-top" role="navigation" data-spy="affix" data-offset-top="50">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<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>
<!-- End Toggle Nav Link For Mobiles -->
<div class="logo-wrapper">
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo6.png" alt="SB Construction">
</a>
</div>
</div>
<!-- Brand and toggle menu for mobile ends -->
<div class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "toplinks">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "toplnks">
<a href="#ourvision">
Our Mission
</a>
</li>
<li id= "toplnked">
<a href= "#ourvision">
Our Vision
</a>
</li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "mbil1">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "mbil2">
<a href="#ourvision">
Our Vision
</a>
</li>
<li id= "mbil3">
<a href= "#ourmission">
Our Mission
</a>
</li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Navigation -->
<div class="clearfix"></div>
</header>
<!-- End Header Section -->
Here is my CSS:
.top-bar {
background: #EEEEEE;
border-bottom: 1px solid #ddd;
}
.top-bar .contact-details li {
display: inline-block;
padding: 8px 0;
}
.top-bar .contact-details li a {
font-size: 14px;
display: block;
margin-right: 15px;
color: #999;
line-height: 32px;
}
.top-bar .contact-details li a i {
padding-right: 5px;
vertical-align: middle;
}
.top-bar ul.social-list {
float: right;
padding: 8px 0;
}
.navbar-top.affix {
width: 100%;
top: 0;
z-index: 9999999;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.navbar-top.affix .logo-wrapper {
margin-top: 15px;
margin-bottom: 18px;
}
.navbar-top.affix .logo-wrapper .navbar-brand img {
width: 100px;
}
.navbar-top.affix .navbar-nav > li {
padding: 15px 0!important;
}
.navbar-top.affix .search-side {
top: 15px;
}
.navbar-top.affix .full-search {
top: 67px;
}
.navbar {
margin-bottom: 0;
background: #fff;
border: none;
border-bottom: 1px solid #eee;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.logo-wrapper {
margin-top: 19px;
margin-bottom: 17px;
float: left;
}
.navbar-brand {
padding-bottom: 0px;
display: block;
height: auto;
padding-top: 0;
}
.navbar-default .navbar-nav {
margin-right: 5px!important;
position: relative;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav > li {
padding: 31px 0;
}
.navbar-default .navbar-nav > li > a {
color: #999;
display: block;
font-size: 14px;
font-family: 'Lato', sans-serif;
padding: 7px 16px;
text-transform: uppercase;
font-weight: 700;
border-radius: 0px;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li > a.active {
color: #ffbb02;
}
.navbar-default .navbar-nav > li > a i {
margin: 0 -2px 0 -5px;
}
.navbar-default .navbar-nav .dropdown {
position: absolute;
left: 0;
top: 100%;
width: 260px;
background-color: #fff;
visibility: hidden;
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav > li.drop:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown li,
.sup-dropdown li {
position: relative;
border-bottom: 1px dotted #eee;
}
.dropdown li:last-child,
.sup-dropdown li:last-child {
border-bottom: none;
}
.dropdown li a,
.sup-dropdown li a {
display: block;
color: #666;
font-size: 14px;
font-family: 'Lato', sans-serif;
font-weight: 400;
padding: 11px 16px;
margin: 0;
text-decoration: none;
text-transform: capitalize;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.dropdown li a i {
margin: 0 0 0 -4px;
}
.navbar-default .navbar-nav .sup-dropdown {
position: absolute;
left: 100%;
top: 0;
width: 260px;
background-color: #fff;
margin-top: 10px;
transition: margin-top 0.2s ease-in-out;
-moz-transition: margin-top 0.2s ease-in-out;
-webkit-transition: margin-top 0.2s ease-in-out;
-o-transition: margin-top 0.2s ease-in-out;
visibility: hidden;
z-index: 3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav li.drop .dropdown li:hover .sup-dropdown {
visibility: visible;
margin-top: 0;
}
.dropdown > li:hover > a,
.sup-dropdown li:hover > a {
color: #fff;
background-color: #ffbb02;
}
.dropdown li a.active,
.sup-dropdown li a.active {
color: #fff;
background-color: #ffbb02;
}
.nav > li.drop:hover ul.dropdown {
display: block;
-webkit-animation: drop-up 400ms ease both;
-moz-animation: drop-up 400ms ease both;
-o-animation: drop-up 400ms ease both;
animation: drop-up 400ms ease both;
}
@media screen and (max-width: 767px) {
.js #wpb-mobile-menu {
display: none;
}
.js .slicknav_menu {
display: block;
}
}
Here is my Javascript I searched through stackoverflow posts:
$("#toplinks, #toplnks, #toplnked").on('click','a', function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $("#fixedbar").outerHeight(true);
window.scrollTo(0,sT);
});
So whenever I click on the anchor tag the content of ID "whoweare" will start from top of the page (behind the navbar). Please note I do have topbar on the top of navbar, which(topbar) on scroll gets hidden and navbar placed at top.
Also note, I have added the code for the index page (first page), the same code of topbar and navbar I will use for other pages (eg: services, projects etc). Please help me out to make my navbar functions properly.
1 answers
solution1
0 ACCPTED 2017-03-04 19:45:47
I got it working...
Please, read these detailled explanations.
first :
Using jQuery, you have to use selectors that actually exist in your HTML.
In your script, "#toplinks , #toplnks , #toplnked and #fixedbar just refer to absolutely nothing.
The impact was that your script simply never triggered at all. The scroll effect you were observing was the natural default behaviour of a link click.
Second :
You have two "special cases" where this script should not do the same thing as for the other links.
- "Section 1" needs to scroll to window position zero in order to show the
top-nav.
It should not calculate an offset. - "Section 4" opens a sub-menu showing "Section 4-1" and "Section 4-2".
Since this "Section 4" also is a link, you have to remove its uselesshrefattribute (href="#").
Then in the script, you have to check if$(this).attr("href")is defined to avoid script error.
I left many explicative console.log() because I'm pretty sure that you will play with this menu to add elements to it.
You will certainly notice that the script runs twice on the sub-menu items.
That is because the event is "bublling" to its parent (the "Section 4" a ).
But this is no big deal.
If you try to stop this "bubbling" effect, you'll break the Bootstrap action on the menu.
So just remove or comment out all console.log() on your final page.
;)
Here is the script
And here is a CodePen , which you can play with (and see how I made it working).
console.clear()
console.log("READY!");
$(".navbar-nav li").on('click','a', function(event){
event.preventDefault();
// Which link was clicked?
console.log($(this).attr("href"));
// Section 1 case:
if( $(this).attr("href")=="#section1" ){
$("body").scrollTop(0);
console.log("Window simply has to scroll to position: 0");
}
// Section 4 case (Or any link which triggers a sub-menu)
if(typeof($(this).attr("href"))=="undefined"){
console.log("This link shall NOT trigger a scroll.");
}
// All the other cases.
if(typeof($(this).attr("href"))!="undefined" && $(this).attr("href")!="#section1"){
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $(".navbar").outerHeight(true);
window.scrollTo(0,sT);
console.log("Section offset is: "+o.top);
console.log("Nav bar height is: "+$(".navbar").outerHeight(true));
console.log("Window has to scroll to position: "+sT);
}
// Just an empty console line for clarity.
console.log("");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Space behind bootstrap navbar
Dynamic Bootstrap 4 Navbar "active" tag
Centering content in Bootstrap 5 OffCanvas Navbar
Bootstrap 3: How to link to another navbar by clicking a hyperlink in current navbar content?
Make Bootstrap Navbar Adjustment for Included Content Website
Have different content in Bootstrap collapsed navbar
Bootstrap 4 navbar right aligned search option along with Signup
Bootstrap navbar dropdown list hides behind html select option
Bootstrap Navbar on mobile shows up behind everything else
When I click an anchor on a navbar it takes me there, but part of the content is hidden by the navbar itself
Related Tags