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>
Related
I want to make the background image of the jumbotron to have full size without needing to state the height in pixes. Reason for that is that I want it to be responsive. Also I want the image to be underneath the transparent navbar.
You can take a look here
The code for it is:
<nav class="navbar-inner navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Cosmos</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="jumbotron" id="first">
<h1 class="text-center" id="h1first">
Welcome to Cosmos<br>
web design
</h1>
</div>
</div>
</div>
The css is:
.navbar-inner {
background:transparent;
}
#first {
background-image: url(http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg);
background-size: cover;
height: 900px;
}
You could use a min-height of 100vh for your hero. And you have to position your navbar absolutely, like this:
https://codepen.io/Sixl/pen/oBrxKr
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!
How do I center list items on a container-fluid navigation? I have been jsfiddling with this for hours. I havent gotten anything that works properly. Looked over a ton of websites for answers.
<nav class="navbar navbar-info 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="hidden-xs" href="#">
<div class="logo-container">
<div><img src="assets/img/logo-header-optimized.svg" alt="" height="52" style="margin:10px 0px 10px 0px"></div>
</div>
</a> <a class="visible-xs navbar-brand"><img src="assets/img/phone-logo-header-optimized.svg" alt="" height="22"></a> </div>
<div>
<ul class="hidden-xs nav navbar-nav navbar-right" style="margin-top:10px">
<li>
<button type="button" class="btn btn-inverse navbar-btn btn-raised" onclick="window.open('')"><strong> BOOK NOW </strong></button>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="navbar-header">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Introduction <i class="material-icons"></i>
</li>
<li> Amenities <i class="material-icons"></i>
</li>
<li> Hospitality <i class="material-icons"></i>
</li>
<li> Information <i class="material-icons"></i>
</li>
</ul>
</div>
</div>
</div>
First: The div <div class="navbar-header"> should have a "witdh:100%".
Second: between insert a div with this style="width: 60%; margin: 0 auto;"
The width: 60% depending of elements
I tried the solution by Julian and it lowers the button on the left and I dont think he wants that. The two solutions that I have are to add one of 2 css styles.
First one .navbar-header {padding: 0 300px;} this will center the list items but will also move the image with it
Second one .navbar-nav {padding: 0 300px;} this will center the list items but will also bring the button closer to the middle but still in the same row as the image.
If you want to dig deeper, I recommend reading this
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
When I click on the toggle on my mobile page, the menu pops up for a brief moment and disappears again. Only the first item remains visible.
I took the css from thebootstrapthemes and basically just changed the colors and the content of the menu.
<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">
<a class="navbar-brand" href="#home"><img src="#"></a>
<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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">Home</li>
<li>Pronunciation</li>
<li>Downloads</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any advice, how I can get my menu back?
This is my site
.navbar-nav {
margin-right: 0px !important;
height: 51px;
}
The 51px height is limiting your collapsible nav to show entirely.
** Not related to your question **
When using Bootstrap don't use row outside a container div since it will cause unnecessary horizontal scrollbars to appear.
Check your HTML for this element: #home #banner .centered .row. It's showing a scrollbar on my browser.