I am using bootstrap framwork and trying to change few properties with navbar, like background color,
When I uses css from a local copy like, ./bootstrap.css override works fine or when I pasting whole css or just navbar css to liveweave CSS column override working.
But
when I am using maxcdn server like
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
Override is failing whether its liveweave or my pc, even after using !important override fails.
I am using
navbar navbar-default navbar-fixed-top
classes
I am sure about what I said above, even before posting this question I visited at least 10 pages or similar question to find solution but none them used CSS from maxcdn server.
Working Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<script src="./google.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
main.css
.navbar-default{
background-color:red;
}
If you use a local css file for override. you must be sure this file is read after the maxcdn...... file. the last one is the css element used
Having the same issue... I noticed that, when viewing the maxcdn bootstrap.min.css in my text editor, the code stops running at ".glyphicon-phone:before{content:"\e145"}.glyphicon..." so I wonder if that is relating to the issue. Hoping that it gets sorted out soon!
Related
I would like to use a bootstrap navbar fixed at the top of my page. I then would like to have a div bellow that that covers the rest of the page. I have the width solved by applying the class container-fluid. However i have adjusted the containers height to 93.5% and set the html overflow to hidden. This works fine with a full screen window. However this solution does not appear o be responsive and fails with window size adjustments. I would like the height of the div container to automatically fill the rest of the page. Code is bellow:
CSS
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
}
#map-container{
height:93.5%;
border-color: black;
border-style:solid;
border-width:2px;
margin:5px;
}
.navbar{
margin-left:5px;
margin-right: 5px;
margin-top:5px;
margin-bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>quickMap</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/quickMap.css" rel="stylesheet" >
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid" id="map-container">
<div>
</div>
</div>
<!-- jQuery -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I think overflow: hidden is messing you up. I changed it to auto and it worked well enough for me.
html {
height:100%;
overflow:auto;
}
Not sure that 93.5% is the exact right number for the height, as, at least on my browser, the div ends up being slightly too tall for the window, but this can be fixed by adjusting the height slightly shorter. Something more like 91%.
Please look at my HTML structure.The problem is that when ever I am trying to open it in the mobile responsive view the design is getting scattered.But in the desktop view this is working fine.The first dropdown under the "Dropdown" tab is working fine but from the third dropdown this getting messy in the mobile responsive view.
I have used "animate.min.css" and "bootstrap-dropdownhover.min.css" for the css part and for the js part I have used bootstrap-dropdownhover.js for the js part.
and my html code is here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 101 Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Dropdown Hover CSS -->
<link href="css/animate.css" rel="stylesheet">
<link href="css/bootstrap-dropdownhover.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap Dropdown Hover JS -->
<script src="js/bootstrap-dropdownhover.js"></script>
<style>
.my_caret {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
Project name </div>
<div class="navbar-collapse collapse" id="navbar" data-toggle="dropdown" data-hover="dropdown" data-animations="zoomIn zoomIn zoomIn zoomIn">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown"> <a class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="dropdown"> One more separated link<span class="caret my_caret"></span>
<ul class="dropdown-menu">
<li>Something else here</li>
<li class="dropdown">Separated link<span class="caret my_caret"></span>
<ul class="dropdown-menu">
<li>Something</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
Have taken reference from this site
http://kybarg.github.io/bootstrap-dropdown-hover/#dropdowns-installing
Thanks in advance for help
Bootstrap provides the following code to use as a navbar. However, when I simply paste in their code without altering it, the collapsed view doesn't work. As you resize your browser window towards more narrow, the navbar turns into a button that you can click to show all the nav components again. However, it doesn't seem to be working when I simply paste in their code. Anyone know why? The nav components do get collapsed, but clicking the button to show them doesn't do anything.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
HTML
<?php include('config/setup.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search Hound</title>
<!--This enables the website to be mobile first-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/js.php'); ?>
<?php include('config/css.php'); ?>
</head>
<body>
<?php include('template/navigation.php'); ?>
<div class="container">
<form class="form-inline" align="center">
<!-- Section to type question-->
<div class="form-group" style="display:block">
<textarea class="form-control" style="width:100%" rows="5"></textarea>
</div>
<!--Section to add money-->
<div class="input-group" id="AddMoney">
<span class="input-group-addon">$</span>
<input id="EnterMoney" type="text" class="form-control" onkeypress='validate(event)' aria-label="Amount (in dollars and cents)">
</div>
<!--Section to add file-->
<div id="AddFile">
Add File
<input type="file" id="uploadFile" style="visibility: hidden;" />
</div>
<div id="imagePreview"></div>
<!--Section for the Submit button-->
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- /container -->
<div
</body>
<?php include('template/footer.php'); ?>
</html>
config/js.php
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I don't see that you are including jQuery before the bootstrap.js file. jQuery is required to use bootstrap javascript components.
Add this BEFORE bootstrap.js in your config/js.php file.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If I understand your question correctly, here is what you want:
Jquery:
$(".navbar-toggle").click(function(){
$(".navbar").slideToggle();
});
http://jsfiddle.net/xz06armf/
I just incorporated Google Custom Search into my Bootstrap powered NavBar. Some weird formatting occurred which I fixed by adding the below CSS code.
This fixed many of the issues but there is still one left: the search box forces a line skip within my NavBar.
Below is my HTML and CSS code.
HTML code (basically the bootstrap template replacing their search form with Google's):
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!-- Google search -->
<!-- <gcse:search></gcse:search> -->
<div style="width: 20%;">
<gcse:search></gcse:search>
</div>
<!-- Bootstrap search -->
<!-- <form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Android Term">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form> -->
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS code
/* AM22 - To make google search box appear correct */
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button
{
box-sizing: content-box;
line-height: normal;
}
/* AM22 - To make google search results tabs appear correct */
.gsc-tabsArea div
{
/*By default, Google custom search CSS sets it as AUTO, which shows scroll bars*/
overflow: visible;
}
.nowrap {
white-space: nowrap;
}
I tried a few variations of the nowrap attribute, the nobr tag and white-space: nowrap; but none of these worked. Any suggestions?
For my website (link in my comment above) I placed the search box in the <div class="navbar-header">
I believe I also had to manually set the width so it wasn't full-page width.
Now about styling my version...
I am trying to get started with Twitter Bootstrap, but for some reason, anything I do, results in a div spanning the entire page. As such, I cannot get the grid system / navigation bar to look right as every div appears to have it's own line.
I am sure that this is a simple fix but I am completely baffled.
http://jsfiddle.net/Aq5xn/show/
<!DOCTYPE html>
<html lang="en">
<head>
<title>
#section('title')
Page Title
#show
</title>
{{-- Ensures proper rendering & touch zooming --}}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{-- HTML::style('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css') --}}
{{ HTML::style('/css/bootstrap.css') }}
{{ HTML::style('/css/style.css') }}
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">asdf</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<p class="navbar-text pull-right">Logged in as username</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">{{-- #yield('content') --}}</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
</div>
</div>
{{-- Scripts are placed here --}}
{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') }}
{{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js') }}
</body>
</html>
You are confusing Bootstrap 2.3.2 with Bootstrap 3.0.0. you can find the differences outlined in the CHANGELOG concerning the migration details. Glancing at your code, i see that navbar-inner class has been removed, container-fluid has been replaced by container, same for row-fluid and so on.
Basically, you're using Bootstrap 2.3.2 code with the new Bootstrap 3.0.0 engine... without migration. Follow the instructions outlined in the above link to know what you need to change and how.
PS: As of version 3.1 you can still use .container-fluid, you just need to use .row classes as with standard containers. Probably this was still the case even with version 3.0, I may have misunderstood the documentation.
Please do note that you are using Bootstrap 3.0.0.
span class is no longer in use. Changed to .col-md-* , read the details at the link below.
http://getbootstrap.com/css/#grid-options
if you still wish to use span class. Please revert it back to Bootstrap 2.3.2.
try this in bootstrap 3 http://getbootstrap.com:
<nav class="navbar navbar-inverse shadow main-menu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">asdf</a>
</div>
<div style="height: auto;" class="navbar-collapse navbar-ex1-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>