I have this Twitter Bootstrap code
-
Add this:
.navbar {
position: relative;
}
讨论(0)
-
Two problems will happen here:
- Page load (content hidden)
- Internal links like this will scroll to the top, and be hidden by the navbar:
<nav>...</nav> <!-- 70 pixels tall -->
<a href="#hello">hello</a> <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1> <!-- Help! I'm 70 pixels hidden! -->
Bootstrap 4 w/ internal page links
To fix 1), as Martijn Burger said above, the bootstrap v4 starter template css uses:
body {
padding-top: 5rem;
}
To fix 2) check out this issue. This code mostly works (but not on 2nd click of same hash):
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
This code animates A links with jQuery (not slim jQuery):
// inline theme global code here
$(document).ready(function() {
var body = $('html,body'), NAVBAR_HEIGHT = 70;
function smoothScrollingTo(target) {
if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
}
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
})
讨论(0)
-
you should add
#page {
padding-top: 65px
}
to not destroy a sticky footer or something else
讨论(0)
-
you can set margin based on screen resolution
@media screen and (min-width:768px) and (max-width:991px) {
body {
margin-top:100px;
}
@media screen and (min-width:992px) and (max-width:1199px) {
body {
margin-top:50px;
}
}
body{
padding-top: 10%;
}
#nav{
position: fixed;
background-color: #8b0000;
width: 100%;
top:0;
}
讨论(0)
-
As seen on this example from Twitter, add this before the line that includes the responsive styles declarations:
<style>
body {
padding-top: 60px;
}
</style>
Like so:
<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
讨论(0)
-
The best solution I've found so far, that does not involve hard coding heights and breakpoints is to add an extra <nav...
tag to the markup.
<nav class="navbar navbar-expand-md" aria-hidden="true">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
By doing it this way the @media
breakpoints are identical, the height is identical (provided your navbar-brand
is the tallest object in the navbar
but you can easily substitute another element in the non fixed-top
navbar.
Where this fails is with screen readers which will now present 2 navbar-brand
elements. This points at the need for a not-for-sr
class to prevent that element from showing up for screen readers. However that class does not exist https://getbootstrap.com/docs/4.0/utilities/screenreaders/
I've tried to compensate for the screen reader issue with aria-hidden="true"
but https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ seems to indicate this will probably not work when the screen reader is in focus mode which is of course the only time you actually need it to work...
讨论(0)