i used href to link file used this
`
when user clicks on logo user will be redirected to link but in my case its not working.
Also tried:
can someone help what's wrong in this you can also live demo here http://www.xpoter.in/blog/ just click on logo you can find error
my head tag
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-nav">
<div class="container">
<div class="navbar-header">
<!-- Logo Starts -->
<!-- #Logo Ends -->
<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>
</div>
<!-- Nav Starts -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right scroll">
<li class="active">Home</li>
<li >About</li>
<li >Partners</li>
<li >Contact</li>
</ul>
</div>
<!-- #Nav Ends -->
</div>
</div>
</div>
</div>
The problem is a piece of jQuery on your page:
jQuery(document).ready(function ($) {
$(".scroll a, .navbar-brand, .gototop").click(function (event) {
event.preventDefault();
$('html,body').animate({scrollTop: $(this.hash).offset().top}, 600, 'swing');
$(".scroll li").removeClass('active');
$(this).parents('li').toggleClass('active');
});
});
Which fires on click of .navbar-brand, and you are using event.preventDefault() which is preventing your link from working
Related
I am new to Stack Overflow so please forgive me if this is a repeat question. I searched thoroughly, but could not figure this out.
I am building a zipline portfolio page using mostly Bootstrap v3.3.6 and cannot get my section links to navigate properly.
Here is a sample of my markup including the nav:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Matthew Shelbourn</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Bio</li>
<li>Projects</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- Body Section1 -->
<div>
<a name="bio"></a>
</div>
<div class="container" style="background-color:cadetblue;">
<div class="row">
<div class="col-xs-12 col-md-4">
<span><img id="profile-image" class="img-responsive pull-left" style="margin-top: 4.1%; margin-bottom:4.1%;" src="#"></span>
</div>
When I click on the link in my nav for "Bio" (or any of the other sections) it doesn't navigate to the top of the corresponding section. Instead, it navigates to an area about 1/3 of the way down from the top of the section.
This same issue happens with every section link I have. I'm sure it's something trivial, but what am I doing wrong? Thanks!
I coded my HTML index to have the navigation bar replaced by a button when the screen gets narrower. But, when the button is clicked, the navigation bar elements are not displayed as I expected. hope somebody can help me.
If I copy-paste the same nav-bar code into w3schools bootstrap simulator (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h) the elements do show up when I click the button (with narrow screen)
here is the piece of code I'm talking about:
<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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/cuori.png" height="42" alt="Valentina e Andrea" title="Valentina e Andrea">Valentina e Andrea
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Noi</li>
<li>Il Grande Giorno</li>
<li>Lista Nozze</li>
<li>Scrivici!</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Auguri a NOI! </h1>
</div>
</div>
I am facing an issue with Bootstrap 3. I have a single page navigation with sections and a fix after scroll navbar. As it scrolls the navbar gets fixed and changes background color. However when it comes to small screens the navbar isnt collapsing and it doesnt remain fixed.
This is part of the html.
<div class="navigate clearfix">
<div class="inner">
<h3 class="navigate-brand">Brand</h3>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" >
<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="navbar-collapse collapse" id="menu">
<ul class="nav navigate-nav menu-right" >
<li class="active">Home</li>
<li>s1</li>
<li>S2</li>
<li>s3</li>
<li>s4</li>
</ul>
</div>
</nav>
</div>
</div>
The js with the background change:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".navigate").css({"background-color" : "red"});
}else{
$(".navigate").css({"background-color":"transparent","background":"transparent"});
}
})
})
You may want to follow the instructions in: https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Based on the above, I have prepared a fiddle for you where navbar remains fixed at any given width of screen: http://jsfiddle.net/dmv73fzr/
Hope it helps you!
On my website in development, I have a link in my navbar that should bring me to the section with the id About, however It seems to ignore the positioning of my navbar, thus throwing off the position a tight bit. Any help in resolving this issue would be appreciated
Visualization of the Problem
Before clicking: http://imgur.com/akrheOX
After clicking: http://imgur.com/zlmL6GQ
Navbar Code
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand page-scroll" rel="home" href="#" title="Virtual Currency Converter"><img style="max-width:350px; margin-top: -20px;"
src="./assets/img/vicuco_brand.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#About">About</a>
</li>
<li><span class="glyphicon glyphicon-cog gi-2x"></span></li>
</ul>
</div><!-- nav-collapse -->
</div>
</nav>
About Section Code
<section class="bg-primary" id="About">
<div class="row">
<div class="container">
<div class="row">
<div class=" text-center">
<h2 class="section-heading" id="AboutHeader">About Us</h2>
<div id="AboutSubtitle">
<p>
Vicuco stands for <strong>Virtual Currency Converter</strong>. <br><br>
Indeed, it is our goal to allow for simple and easy conversion <br>
of the virtual currencies among themselves, as well as to foreign currencies. <br><br>
We are an aggregator. That means we aggregate virtual currency <br>
trading data from all major virtual currency exchanges, in order <br>
to show you a near real-time conversion rate. <br><br>
We will send you in the right direction, if you need to buy, sell, or <br>
exchange virtual currency.<br><br>
</p>
<p>
Follow us on <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/vicucodotcom">
<span class="fa fa-twitter fa-2x"></span></a> and check out our
<strong>blog</strong>
for our latest developments!
</p>
</div>
</div>
</div>
</div>
<img src="assets/img/cloud.png" id="cloud" width="25%" height="100%">
</div>
</section>
You are using a fixed header, so it's location and size will be ignored by the other page contents. One method to fix this is to use a little script that does the following:
Detects the navbar height
On navabar item click - scroll the page but offset it from the top of the viewport
The offset is determined by the navbar height we just detected.
You can see it added below.
I say 'one method' because there is an alternate approach where the anchor points can be offset (see here)
$(document).ready(function() {
$(".navbar ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(this.hash).offset().top - $('.navbar').height()
}, 600);
});
});
#one, #two, #three {
height: 1000px;
}
#one {
background: pink;
}
#two {
background: salmon;
}
#three {
background: lightsalmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http:////maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Offset Scroll</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Section one</li>
<li>Section two</li>
<li>Section three</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<section id="one"></section>
<section id="two"></section>
<section id="three"></section>
</div>
</body>
The following code displays a navbar always on the top of the page.
I need the second container (content) to be positioned at the end of the navbar and not under it.
At the moment second container is under the navbar.
I could add some empty space on the top of the content are, but I am not sure it is a good approach.
Any idea how to solve it?
<div class="container">
<div class="row">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
<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>
</nav>
</div>
</div>
<div class="row">
<div ng-view></div>
</div>
</div>
Updated 2018
Bootstrap 3
According to the Bootstrap docs (http://getbootstrap.com/components/#navbar-fixed-top) you should use padding-top on the body..
"The fixed navbar will overlay your other content, unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high."
body { padding-top: 70px; }
Demo: http://www.bootply.com/Ob3Bajkv1f
Bootstrap 4
Padding is also recommended for the fixed-top Navbar in Bootstrap 4 to prevent content hiding at the top of the body. You can add custom CSS for padding-top or use the pt-5 utility class on the body tag:
<body class="pt-5"></body>
You would need some CSS like this:
body {
padding-top: 20px;
padding-bottom: 20px;
}
Or like this:
.navbar {
margin-bottom: 20px;
}
Make sure you only use what you need,
Just add margin-top: 50px; to the underlaying container.
50px has to be the height of your navbar.
I was able to solve this issue using the following code.
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-default" 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>
<a class="navbar-brand" href="#">KanbanBoard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Boards</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>User</li>
</ul>
</div>
</div>
</nav>
<!-- boards -->
<div ng-view></div>
</div>