I have a navigation bar, and I have some text goes in front of the image directly below the nav bar above it.This image is responsive, so it scales depending on the size of the screen. However, when I adjust the screen to its smallest size(i.e the size that it would be if it were on a mobile device) the image stays in one place, but the text that would normally be fixed in front of the image pushes upward, behind the navigation bar. Can you please help explain why this is? Here's my code.
HTML
<header>
<!--Navigation Secton-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Anna's Portfolio</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active"> About</li>
<li>Works</li>
<li>Talk To Me</li>
</ul>
</div>
</nav>
</header>
<body>
<!-- Top Image, Title Text-->
<div class="container-fluid">
<div class="row">
<img class="image img img-responsive" src="http://www.qerja.com/journal/wp-content/uploads/CODING.jpg">
<div class="text">
<h1>Anna's Portfolio</h1>
<h2>Come Inside.</h2>
</div>
</div>
</div>
<!--About, Mission-->
<div class="container-fluid">
<div class="row">
<div class="about">
<h2>About Me</h2>
<p>My name is Anna Gibson and I'm a web developer<br> who seeks to tell the stories of the marginalized.<br> I'm a staunch advocate for those who struggle with<br> their mental health and I hope that I can create apps<br> that will help people with their mental health as apps<br> have helped me. </p>
</div>
</div>
</div>
</body>
<footer></footer>
</html>
CSS
.navbar-brand {
position:relative;
bottom:70px;
text-align:right;
}
.image {
position:relative;
width:100%;
padding-top:0;
height:200px;
}
.text {
text-align:center;
position:relative;
bottom:400px;
color:white;
font-family:;
font-size:24px;
}
Thanks so much, if anything is unclear, let me know.
Text pushes behind navbar because of bottom:400px; issue on .text class
You Need Some HTML and CSS Fixes
HTML
<header>
<!--Navigation Secton-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Anna Portfolio</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"> About</li>
<li>Works</li>
<li>Talk To Me</li>
</ul>
</div>
</div>
</nav>
</header>
<body>
<!-- Top Image, Title Text-->
<div class="container-fluid">
<div class="row">
<div class="main-section">
<img class="image img img-responsive" src="http://www.qerja.com/journal/wp-content/uploads/CODING.jpg">
<div class="text">
<h1>Anna's Portfolio</h1>
<h2>Come Inside.</h2>
</div>
</div>
</div>
</div>
<!--About, Mission-->
<div class="container-fluid">
<div class="row">
<div class="about">
<h2>About Me</h2>
<p>My name is Anna Gibson and I'm a web developer<br> who seeks to tell the stories of the marginalized.<br> I'm a staunch advocate for those who struggle with<br> their mental health and I hope that I can create apps<br> that will help people with their mental health as apps<br> have helped me. </p>
</div>
</div>
</div>
</body>
CSS
.navbar-brand {
position:relative;
bottom:70px;
text-align:right;
}
.main-section{
position: relative;
}
.image {
position:relative;
width:100%;
padding-top:0;
height:200px;
}
.text {
text-align:center;
position:absolute;
color:white;
font-family:;
font-size:24px;
left:0;
right:0;
top: 0;
bottom: 0;
margin:auto;
}
Link for reference
Hope this Helps..
Related
I only can see the tab which is I made active by default. But when I click on other tabs, I can't see anything. They just won't open. What's my mistake here? Need your help.
I tried to find the solution on bootstrap documentation, but I didnt come across with something like this.
By the way I am just learning bootstrap. But it's like I am just copying and pasting, is this wrong? How should I learn this? It seems a bit harder than just css. Cause there are many classes that are written by default.. I don't want to memorize. So is it good that I copy and paste when I need?
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>100$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>Must be finished in 6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>250$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>175$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex3-tab-1" data-mdb-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-2" data-mdb-toggle="tab" href="#ex3-tabs-2" role="tab" aria-controls="ex3-tabs-2" aria-selected="false">Part Time Program</a>
</li>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-3" data-mdb-toggle="tab" href="#ex3-tabs-3" role="tab" aria-controls="ex3-tabs-3" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="ex2-content">
<div
class="tab-pane fade show active"
id="ex3-tabs-1"
role="tabpanel"
aria-labelledby="ex3-tab-1"
>
<p>$70,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>80%</p>
<p>Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-2"
role="tabpanel"
aria-labelledby="ex3-tab-2"
>
<p>$60,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>75%</p>
<p>Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-3"
role="tabpanel"
aria-labelledby="ex3-tab-3"
>
<p>$40,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>65%</p>
<p>Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
</body>
</html>
Example in Bootstrap5 docs says to use: data-bs-toggle, you have data-mdb-toggle. That should fix it for all your nav-links.
<a class="nav-link active" id="ex3-tab-1" data-bs-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
https://getbootstrap.com/docs/5.0/components/navs-tabs/#base-nav
You have not added the javascript to do so.
Add this javascript to your code.
var triggerTabList = [].slice.call(document.querySelectorAll("#ex1 li a"));
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl);
triggerEl.addEventListener("click", function (event) {
event.preventDefault();
tabTrigger.show();
});
});
Documentation: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
Codepen: https://codepen.io/manaskhandelwal1/pen/eYdLYdN
The script tag for bootstrap javascript should be added after the body tag and not in the head tag, sometimes this will also create problems.
And you don't have to learn any bootstrap classes, gradually you will learn them automatically.
If you want any other help comment it here I will help you as soon as possible 😃.
Edit2:
Okay, the problem was, that I used a <div class="row"> around the <div class="topimage"> tag. Strange. Could someone explain why it is?
I'm pretty new to bootstrap and created a web page for learning purposes.
Everything is working pretty well so far, except the navbar.
This is my nav code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="headertest ">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<form class="navbar-form navbar-left">
<button class="btn btn-default">ENTDECKEN</button>
<button class="btn btn-default">FINDEN</button>
<button class="btn btn-default">PLANEN</button>
<p class="font">
<b> Zurück zur Hafenseite |</b> <a style="text-decoration: none">Salsbury & Mysteriöses Stonehenge</a>
</p>
</form>
</div>
<div class="col-sm-2 ">
<div class="navbar-form">
<img src="../assets/aida.png" class="logo ">
</div>
</div>
<div class="col-sm-4">
<div class="navbar-form navbar-right">
<form action="#" style>
<div class="dropdown">
<img src="../assets/lupe.png" class="icons" />
<img src="../assets/telefon.png" class="icons" />
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Erste Aktion</li>
<li>Zweite Aktion</li>
<li>Noch eine Aktion</li>
<li role="separator" class="divider"></li>
<li>Ein Link</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
</div>
The problem is, if I use the navbar-fixed-top class, the content inside the navbar is jumping while I scroll.
Like the top margin is vanishing while I'm scrolling down and if I Scroll up, the margin (or whatever the problem is) just magically appears back.
Normal and scrolling up:
Scrolling down:
I hope you can see what I mean.
Does anybody know what I'm doing wrong?
(my css classes shouldn't be the problem. If I delete them, the content still keep "jumping")
Thank you
Edit:
I have an image as the first item (after the navbar) that seems to cause the problems.
If I delete it, the navbar is working as expected.
Css:
.topimage{
height: 600px;
width: 100%;
align-self: center;
background-image: url("./assets/testbild3.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
and how I implemented it:
<div class="row">
<headertest></headertest><!-- navbar component -->
</div>
<div class="row ">
<div class="topimage">
</div>
</div>
The fiddler link: (where it works without "jumping" navbar content)
https://jsfiddle.net/Biberium/g52cd6v8/
I am developing a bootstrap website that uses trianglify to generate background images for my hero div. I want text to go in the hero image, but it keeps pushing my image down.
HTML
<div>
<div id="heroImageContainer">
<div class="row">
<div class="col-lg-1 col-centered">
<p>Centered Text</p>
<p>more text</p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Joshua</a>
</div>
<div>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
CSS
/*Universals*/
.col-centered{
float: none;
margin: 0 auto;
}
/*************/
#heroImageContainer{
width:100%;
height:400px;
}
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>
<script type="text/javascript">
var something = document.getElementById('heroImageContainer');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,
height: dimensions.height
});
heroImageContainer.appendChild(pattern.canvas());
</script>
Here is a working Fiddle of the problem
Fiddle
How about position the canvas and then add a z-index on to the content so it places the text infront
canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}
I am using bootstrap as my CSS framework. My HTML code is as below:
.home-image {
position: relative;
}
.photography {
position: absolute;
}
.image-text_left {
/*display:none;*/
position: absolute;
width: 300px;
top: 200px;
;
left: 200px;
z-index: 100;
font-weight: bold
}
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">link 1</li>
<li>link 2</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="span7">
<div class="home-image">
<img class="photography" src="http://placehold.it/700x400" />
</div>
<p class="image-text_left">Fashion Photography</p>
<h5>Heading</h5>
</div>
<div class="span5">
<div class="home-image">
<img class="photography" src="http://placehold.it/400x200" />
</div>
<div class="home-image below">
<img class="photography" src="http://placehold.it/400x200" />
</div>
<p class="image-text_right-top">Fashion Photography</p>
<h5>Heading</h5>
</div>
But, as I stated in my question, the class .image-text_left is not absolute relative to the parent class home-image? Rather it is absolute to the window! Why this is happening? What's wrong?
Looks like it's not a child of .home-image to me.
<div class="home-image">
<img class="photography" src="http://placehold.it/700x400" />
</div>
<p class="image-text_left">Fashion Photography</p>
This is your current code: (p class image-text_left is not included in Div home Image)
<div class="home-image">
<img class="photography" src="http://placehold.it/700x400" />
</div>
<p class="image-text_left">Fashion Photography</p>
In this example it is included:
<div class="home-image">
<img class="photography" src="http://placehold.it/700x400" />
<p class="image-text_left">Fashion Photography</p>
</div>
Hope it helps you!
Greetings
Following the example of TB, I have a navbar that is marked up as follows:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.
I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?
Just change the class container to container-fullwidth like this :
<div class="container-fullwidth">
Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
...
</div>
I put together a jsFiddle as an example.
Put the navbar out of your container:
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
<div class="container">
</div>
EDIT:
Here is one that I did with responsive navbar. The code fits the document body:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Link</li>
<li class="divider-vertical"></li>
<li>Link</li>
</ul>
<ul class="nav pull-right">
<li>Log out</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div> <!-- end container -->
<script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
I'm very late to the party but this answer pulls up top in Google search results.
Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.
Like so:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>More Stuff</li>
</ul>
</div>
</div>
</div>
Put your <nav>element out from the <div class='container-fluid'>.
Ex :-
<nav>
......nav content goes here
<nav>
<div class="container-fluid">
<div>
........ other content goes here
</div>
</div>
You need to push the container down the navbar.
Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/
<header>
<h2 class="title">Test</h2>
</header>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</div>
<div class="container">
</div>
Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.
I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.
You can override some css
body {
padding-left: 0px !important;
padding-right: 0px !important;
}
.navbar-inner {
border-radius: 0px !important;
}
The !important is needed just in case you link the bootstrap.css after your custom css.
And add your nav html out of a .container
To remove the border-radius on the corners add this style to your custom.css file
.navbar-inner{
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
}
I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;
#div_id
{
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.
Here is the solution to your question
<div class="container">
<div class="navbar">
<div class="navbar-inner col-md-12">
<!-- nav bar items here -->
</div>
</div>
</div>