How to have a normal bar by Bootstrap? (Not a Navigation) - html

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.

Related

Bootstrap navbar header - how to center the image

I've a main layout page that is used on all other pages. The following bootstrap navbar header has an image that always displays on the left. I would like it to display in the center. I've tried to use <div class="text-center">...</div> but to no vail. I'm using ASP.NET Core with VS2015 that by default has Bootstrap 3.0 installed and confitured. But this question may be generic to all Bootstrap users:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<table><tr><td><img src="~/images/abc.gif"></td></tr></table>
</div>
</div>
</div>
Just get rid of all the unnecessary containers and add text-center to navbar
<div class="navbar navbar-inverse navbar-fixed-top text-center">
<img src="~/images/abc.gif">
</div>
jsFiddle: https://jsfiddle.net/azizn/ctrppwLe/
P.S You should avoid using tables unless you're presenting tabular data.

CSS: How can I change bootstrap navigation bar background color

I'm using R and shiny to create a webpage which obviously uses bootstrap CSS. I have no experience at all with bootstrap but from some years ago with css.
I have now a structure like:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<span class="brand pull-left"></span>
....
</div>
</div>
</div>
And I want the complete navbar with a different color. How can I access this div container "navbar navbar-static-top"?! I have no clue how to reference a CSS code with a space in between...
The space you are referring to is used to assign multiple classes to an element. You would select it by using either of the classes, or both.
.navbar {
}
.navbar-static-top {
}
.navbar,
navbar-static-top {
}
are all acceptable ways of selecting the navbar depending on the required specificity. Please remember your CSS will have to appear after the bootstrap CSS in order to override the bootstrap styles.
It's a better practice to use Sass or Less and extend the bootstrap classes to your own classes, but this might be a bit above your knowledge at the moment.
Just add a custom class, say navbar-custom and apply the changes to the custom classes rather than modifying the defualt classes. Something like this:
HTML:
<div class="navbar navbar-custom navbar-static-top">
<div class="navbar-inner">
<div class="container">
<span class="brand pull-left"></span>
....
</div>
</div>
</div>
CSS:
.navbar-custom {
background-color: red;
--other custom properties--
--other custom properties--
}

Absolute positioning of navbar in Twitter bootstrap 3

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>

Bootstrap with two static sections

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; }

Twitter bootstrap weird top and left margin

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;
}