The fixed navbar in bootstrap is not absolute in position. When using fixed navbars the markup below the navbars appears right on the header navbar. How to overcome this:
I tried position:absolute and also a margin from top equal to size of navbar header height. Nothing is working. Any suggestions?
Bootstrap provides option to be fixed at the top
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
reference: http://getbootstrap.com/components/#navbar-fixed-top
OR
You can use absolute to be fixed at the top and add same height navbar as body padding-top
for example
.navbar{
height: 50px;
}
body{
padding-top: 50px;
}
In bootstrap 4, use fixed-top instead of navbar-fixed-top:
<nav class="navbar fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
Related
I can decide between either using sticky-top (or fixed-top) or my Navbar being scrollable on a mobile device. Meaning that whenever I add sticky-top the scrolling functionality disappears or when I give the scrolling a higher priority, the navbar is not sticking to the top anymore. I got another object above the navbar, that's why I'd like to use Bootstrap's sticky-top functionality.
I tried different approaches to making my navbar scrollable and different approaches to make my navbar sticky, but they didn't work together. It wasn't scrollable until I wrapped the entire nav in another div.
My navbar looks like this:
<div class="jumbotron jumbotron-fluid jumbotron_custom" style="margin-bottom: 0px">
<h1>Some Text</h1>
</div>
<div class="sticky-top nav-wrapper">
<nav class="navbar navbar-expand-xl navbar-dark navbar-default">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
</div>
</nav>
</div>
and the relevant code in my Custom CSS File looks like this:
#media (max-width: 1199.98px) {
.navbar-wrapper{
height: 100%;
max-height: 100%;
width: 100%;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow: hidden;
}
}
I'm using Bootstrap 4
I want the Navbar to always be sticky while having the scrolling functionality on mobile devices.
I am trying to have a bar on the top of my site, its not a navigation bar. Various items will go on this bar. So I was thinking How can use Bootstrap for this purpose. There is a nav bar in Bootstrap but I used it already for the navigation of my bar. Can I also use it for different purposes?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
</div>
</nav>
Use navbar-static-top instead of navbar-fixed-top for your Bootstrap's Navigation bar.
Add <div id="normal-bar">My normal bar</div> before your Bootstrap's Navigation bar and you can customize it any way you want.
Bootstrap's Starter template - DEMO
HTML
<div id="normal-bar">My normal bar</div>
<div class="navbar navbar-inverse navbar-static-top">
......
</div>
CSS
body {
padding-top: 0px; /* It was 50px before */
}
#normal-bar {
/* Your CSS - It's only for DEMO */
background-color:#f00;
text-align:center;
padding:10px 0px;
font-size:20px;
}
You don't need to use nav. For additional bars and sections use this code:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>Some text here or whatever you want</p>
</div>
</div>
</div>
Your nav has position:fixed and min-height:50px properties, so don't forget to add to your next section margin-top:50px so it's visible.
Yes, you can use two navigation bars to achieve this behavior by using two separate navbars with navbar-fixed-top and navbar-static-top. See this example on bootply.
I am new to Bootstrap and can't find any answer to my question.
I am using the AdminLTE bootstrap theme for testing. I want to create a nice website theme with it and I want a fixed width. The fixed width is working but not for the header bar.
I want the header bar and menu to always be fixed.
Because I add the "fixed" class to te body my site is fixed width.
Only the header isn't fixed width. It is only fixed to the screen.
Can someone help me out?
You need to wrap the interior of the header with a <div class="container"></div>
<header class="header">
<div class="container">
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<a href="index.html" class="logo">
<!-- Add the class icon to your logo image or logo icon to add the margining -->
Testing
</a>
</nav>
</div>
You need to remove the margin-left and position fixed from the navbar css as well.
I'm creating a mobile site using bootstrap and i'm struggling to get the CSS correct.
I am trying to create 3 sections on the page.
Navigation - this will always be at the top, so when the page scrolls, the navbar is always visible. Im using the standard bootstrap navbar for this and appears to work well.
I next have a DIV which display a pretty line graph - i would like this to be the same as the nav bar - i.e. does not scroll away.
Next i have a DIV which contains a table, this needs to be scrollable.
So essentially the top half of the screen should just be static and the bottom half containing the grid should move. This is what i've done so far! but it doesn't seem correct.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
</nav>
<div style="padding-top:70px; z-index:100; height:430px; top:0; position:absolute; padding-right:2%">
A pretty line Graph
</div>
<div style="position:relative; height:100%; overflow-y:auto; overflow-x: hidden; padding-top:430px;">
My Table
Hopefully that makes sense.....
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
Place your header items here
</nav>
<div class="page-header">
Place your chart here
</div>
<div class="container">
Place your table here
</div>
CSS:
body { padding-top: 70px; }
I am trying out twitter bootstrap and am new to CSS/HTML. Here's my simple HTML:
<!DOCTYPE html>
<html>
<head>
......
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Test App</a>
</div>
</div>
</div>
</body>
</html>
It renders and page that has a weird top and left margin:
If you would like the navbar to be full width and stuck to the top then add the navbar-fixed-top class to the navbar like so:
<div class="navbar navbar-inverse navbar-fixed-top">
check in firebug, either of your container - navbar, navbar-inner, container may have padding or margin.
With regards to the top margin try body {
padding-top: 0;
}