I want to reduce bootstrap navbar height ,What is the best solution to achieve this task , should i overwrite bootstrap css or any pure css solution ?
main.html
<div class="col-md-10">
<div class="tab-content">
<nav class="navbar navbar-default container-panel">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<li>some other stuff</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
main.css
.navbar.container-panel {
width:250px;
margin-left: 760px;
min-height: 15px;
}
You need to overwrite the Bootstrap CSS.
In your HTML file put the Bootstrap link first then put your link to your css file after. Then you can go about editing the navbar class you want.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="location/filename.css">
Related
Can somebody explain what is going on here?
I'm using bootstrap 3.3.7.
Why are .container elements invisible?
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Big Brother</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>something</li>
</ul>
</div>
</div>
<div class="container">
<h2>Invisible</h2>
</div>
Your <h2> is not invisible, it's hiding behind your navbar.
You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.
If you add padding-top: 50px; to <body> you will see your <h2>.
If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.
I used bootstrap and I would like to change the active page background to green but it doesn't work.
.navbar-inverse {
color: #fff;
background-color: #4CAF50;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<div class="logo">
<img src="images/logo.png">
</div>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</nav>
When I change the background-color in "Inspect Element" it works like a charm. I don't know what to try anymore.
Thanks!
I tested your code on my computer and it works perfectly.
Why it's not working for you is, I'm guessing, because you are linking your CSS before Bootstrap in HTML. In order to override Bootstrap's CSS, you need to link your custom CSS after Bootstrap.
Eg:
<link href="bootstrap.css" ...>
<!-- put your custom css after bootstrap -->
<link href="my-custom-style.css" ...>
I have some problems:
I have a tab-div - you can find the code here: http://pastebin.com/KPpgEBi6. As you can see in this http://i.stack.imgur.com/U2MUn.png where the arrows point, there is some space, the tab doesn't start at the right corner, how can I fix it?
There is also some underline that continues behind the content div.
What to do?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container" style="width: 45%;float: right;">
<ul class="nav nav-tabs navbar-right">
<li><a data-toggle="tab" href="#sub_cats_{CID}">{SUB_CATEGORIES}</a></li>
<li class="active"><a data-toggle="tab" href="#category_{CID}">{CATEGORY}</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
<div id="category_{CID}" class="tab-pane fade in active category" style="background-image: url('{CATEGORY_IMAGE}');">
<h1> {CATEGORY_NAME} </h1>
</div>
<div id="sub_cats_{CID}" class="tab-pane fade">
<ul class="sub_categories">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
</div>
You really don't want to be applying inline styles to primary grid elements like that. Work with your framework, not against it.
The fix here seems to be to align your tabs right:
<div class="container">
<ul class="nav nav-tabs navbar-right pull-right">
Demo
Update: The issue is your application of RTL across the site. Reverse it for the nav tabs:
.nav-tabs {
direction: ltr;
}
Demo 2
I"m trying to make a bootstrap nav bar like this :
I could manage only this one:
And here is my code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.nav{
position: absolute;
top: 5px;
right: 190px;
border-left: 3px solid #EEE;
border-right: 3px solid #EEE;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="./imgs/endorse-logo1.png" alt="logo">
</div>
<div class="navbar-header nav">
<ul class="nav nav-pills">
<li class="dropdown">
English<b class="caret"></b>
<ul class="dropdown-menu">
<li>Russian</li>
<li>Chinese</li>
<li>German</li>
<li>Italian</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
It isn't even responsive. How can I make a responsive nav bar properly?
If you take a look at the official documentation you will see that there is a lot of mistakes in your code:
you have two navbar-header element, you should have only one, and multiple <ul class="nav navbar-nav"> elements,
you need to wrap your navbar elements (<ul class="nav navbar-nav">) in a <div class="collapse navbar-collapse"> element in order to make it responsive,
you can get rid of your .nav css to fix the navbar top as you are already using navbar-fixed-top,
you are using <ul class="nav nav-pills"> where you should directly use <a class="dropdown-toggle">
etc...
Maybe you should retry to create the navbar from the beginning by following precisely the documentation.
I am a complete noob when it comes to using bootstrap, or any HTML. I made a simple banner using photoshop and a simple nav-bar for my high school robotics team, but I am having trouble comprehending bootstrap's grid system. For some reason, my navbar is cutting off my banner. I want the banner below the navbar, how would I do this using bootstrap?
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</body>
Bootstrap doesn't really have a banner element, and the grid system isn't necessarily related to placing an item like that into your page. If you want a banner that spans the page like the navbar does, then you probably want to look at their Jumbotron element. All you really have to do is replace your "banner" class with a "jumbotron" like so:
<!-- Banner -->
<div class="jumbotron">
<img src="Banner.png" class="img-responsive" alt="Reponsive image" />
</div>
Then you just need to add a little custom styling to hide the gray background and have your banner image take up the width of the screen:
.jumbotron {
padding-left:0;
padding-right:0;
padding-bottom:0;
}
That should do it. I had to edit my answer once I saw that you had posted the link to your website.
Demo Here
include your banner inside the container tag
<head>
<title>Robotics Team 3774 Home</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
<!-- Banner -->
<div class="banner">
<img src="Banner.png" class="img-responsive" alt="Responsive image">
</div>
</div>
Just add the following line to your CSS:
body
{
padding-top:50px;
}
And you should be good to go.
This is generally done in Bootstrap when navbar-fixed-top is used.