I read information about navbar-nav but I don't use it because it make a list from my li elements instead of row.
If I want to reach it I should add this css
#media screen and (min-width: 768px) {
.navbar-nav {
width: 100%;
}
}
But this piece of css doesn't resolve my problem with IE8
HTML code
<nav class="status-navbar navbar navbar-default" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse container-fluid container-lg-height container-md-height"
id="bs-navbar-collapse-1">
<div class="row row-lg-height row-md-height" style="margin: 0;">
<div
class="col-lg-4 col-md-4 search-panel col-lg-height col-md-height col-middle">
<form class="navbar-form navbar-left search-form" role="search">
<div class="form-group col-lg-10 col-md-10">
<input type="text" class="search-input form-control input-lg"
placeholder="Twitter Quick Search">
</div>
<div class="col-lg-2 col-md-2">
<button type="button" class="btn btn-lg btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
</div>
<div class="col-lg-7 col-md-7 col-lg-height col-md-height col-middle">
<ul class="nav navbar-nav">
<li class="col-lg-2 col-md-2 metricItem underline"><span class="metricsLabel">FOLLOWING</span>
<span id="followingTweetIds" class="metricsValue">0</span></li>
<li class="col-lg-3 col-md-3 metricItem"><span class="metricsLabel">SAVED
SEARCHES</span> <span class="metricsValue">0</span></li>
<li class="col-lg-2 col-md-2 metricItem">
<span class="metricsLabel">TWEETS RETRIEVED</span>
<span id="tweetsRetrieved" class="metricsValue">0</span>
<div class="limitPane">
<span class="metricsLabel">( LIMIT</span>
<span id="limitRequests" class="limitRequests"></span>
<span class="metricsLabel">)</span>
</div>
</li>
</ul>
</div>
<div class="col-lg-1 col-md-1 col-lg-height col-md-height col-middle">
<ul class="nav navbar-nav">
<li><a href="#" id="notificationBtn" class="notificationBtn" style="font-size: 17px;">
<span class="glyphicon glyphicon-bell">Notifications</span>
</a></li>
</ul>
</div>
</div>
</div>
</nav>
Please, help me to understand for what I should use navbar-nav and how to make it cross-browser solution in my example.
Link to JSFiddle
Even interesting, I changed position this fragment from head under bootstrap.min.css to the bottom of <body> element.
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Now in IE 8 it looks like
It was my mistake with location for including resond js. Because I use jquery layout framework. I've understood that I have a problem with display: table-row. I use it because I want to create columns inside row that have equals heights Bootstrap 3 responsive columns of same height
Reference the Respond.js script after all of your Css
.UPDATE 2
I changed my navbar to default Bootply. But it still looks different from result that I want to achieve. I lost possibility to align my Notification link and form element inside navbar addind navbar-btn doesn't help. I can't do responsive width for input field. Bootstrap 3 - How to maximize input width inside navbar. This solution works well just for input-group. Please, help me to understand how create
Responsive items of same height inside navbar
Stretch width form (using input-group not form-group) such a way that when I resize page button go down on the next line
This example is in Bootstrap 3.2 which has bug fixes for their components, but that's -- probably -- not the issue here. Your css is very messy and it's hard to determine what doesn't work in IE8.
I would build my own component and not use Navbar, which is not intended for use as you have. Over-writing so much is really not a good idea without intimate familiarity with source CSS.
Avoid margins, like you have, on elements with box-sizing:border-box especially if they are trying to fit inside a fluid container. You have margins on col-- classes, this will mess stuff up.
Screen Shot IE 8:
Demo: http://jsbin.com/zaxiwo/1/
Edit: http://jsbin.com/zaxiwo/1/edit
Tips:
Keep media queries to a minimum, that is use fewer if possible.
Every time you make a change, even minor, check in IE8, then you know what happened.
Comment your html
HTML: (requires respond.js correctly installed in the head as per their instructions, before CSS AND locally hosted CSS linked via RELATIVE path.)
Notes: the html and the CSS is not complete, the small viewport styles have not been done. You put the common, shared among all viewport sizes BEFORE the min-width media query. If it's common to all it goes outside the media queries, but if there is a slight difference you can remove that style, so if there is padding on small viewports but no padding on larger, remove the padding on the larger, but if there is a total difference in appearance, then put the smallviewport styles ONLY in a max-width, which is 1px less than the min-width.
<div class="control-bar container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".control-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse control-collapse">
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</div>
<!--/.col-*-3 -->
<div class="col-sm-5">
<div class="row">
<div class="col-sm-4 indicator active">
<span class="title">Word</span>
<span class="number">1</span>
</div>
<!--/.col-*-4.indicator :: nested -->
<div class="col-sm-4 indicator">
<span class="title">Word</span>
<span class="number">2</span>
</div>
<!--/.col-*-4.indicator :: nested -->
<!--/.col-*-4 :: nested -->
<div class="col-sm-4 indicator">
<span class="title">Word</span>
<span class="number">3</span>
<span class="notice">word</span>
</div>
<!--/.col-*-4.indicator :: nested -->
</div>
<!--/.row (nested) -->
</div>
<!--/.col-*-7 -->
<div class="col-sm-3 col-sm-offset-1 icon-link">
<i class="glyphicon glyphicon-home"></i> icon link goes here
</div>
<!--/.col-*-3 -->
</div>
<!--/.row -->
</div>
<!--/.nav-collapse -->
</div>
<!--/control-bar.container-fluid -->
CSS
.control-bar {
background: #333;
color: #fff;
clear: both;
}
.control-bar a {color:#fff}
.control-bar .control-collapse {
clear: both;
width: 100%;
padding: 0 15px 20px;
}
.control-bar .icon-bar {
background: #fff;
}
.indicator:hover,
.indicator.active {
border-bottom-color: orange
}
.indicator {
padding: 10px 15px;
border-bottom: 5px solid transparent;
}
.icon-link a {
padding: 10px 0;
display: block;
}
/* how it looks on larger viewports*/
#media (min-width:768px) {
.control-bar .control-collapse {
display: inline!important;
padding: 0;
}
.indicator {
height: 100px;
padding: 5px 0 0 0;
display: table;
}
.indicator span {
display: table-row;
text-align: center;
font-size: 14px;
border: 1px solid red;
vertical-align: middle;
}
.indicator .title {
font-size: 15px;
text-transform: uppercase;
}
.indicator .number {
font-size: 20px;
color: orange;
}
.indicator .notice {
font-size: 12px
}
/* height of parent minus by height of element divided by 2 */
.control-bar .input-group {
margin-top: 33px
}
.icon-link {
text-align: right;
padding-top: 28px;
}
}
Internet Explorer is not able to read CSS Media Queries, so you need to add this meta tag on your HTML head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And include a JS file in order to IE read and execute these media queries:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Before you Work in Bootstrap Version 3.1.1
You have to be aware of Browser compatibility and CSS3 Support for Windows Explorer 8!
Please read: http://getbootstrap.com/getting-started/#support
In addition, Internet Explorer 8 requires the use of respond.js to
enable media query support.
See also: https://github.com/scottjehl/Respond
For this reason the basic template contains these lines in the head section:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
Related Useful Links
Bootstrap Support Documentation
CSS Compatibility in Internet Explorer
IE8 issue with Twitter Bootstrap 3- stackoverflow Question [Must Read]
Page Rendering in IE stackoverflow Question
Support of IE with Bootstrap stackoverflow Question
For that in Bootstrap Documentation:
Try importing html5-respond.js
in your head section of html page, hten IE will be able to render the media queries.
Related
Design a web page which should contain Bootstrap’s responsive navigation bar, a responsive circle image and a responsive footer.
The snap shot of the web page is given below:
Image 1: Web page in large devices
https://drive.google.com/file/d/1szF9Fc8uX_2wtVw2ase_Lxmg_7ZHitzy/view?usp=sharing
Image 2: web page in small devices:
https://drive.google.com/file/d/1RclzRGsN_PTptMHzrDznFlTzrY2yK5fc/view?usp=sharing
Note:
The web page ‘responsive.html’ template is given. You have to write the code only for the specified part of the 'responsive.html' file and 'app.css' file.
Key Points:
Add responsive feature to the navigation bar. The collapsing nature is tripped by a button with the id ‘btn-id’ belongs to Bootstrap’s navigation toggle class and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates various elements like navigation links, forms, and other contents to toggle
Set the navigation brand as ‘MyBrand’.
Create three icon bars (hamburger button) with appropriate Bootstrap class. This will toggle the elements that are in the navigation collapsible div tag.
Add responsive features to the images so that it can automatically adjust to fit the size of the screen.
Make the image to scale down if it has to, but never scale up to be larger than its original size. Set the properties accordingly. For this override necessary css properties of the ‘img-responsive’ class in ‘app.css’ file. Set the max-width of the image to 100% and height to 'auto'.
After written the code I am facing some errors :
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 3 : Set 3 icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
Can you please tell what should I do after this to resolve these errors.
Here is the code I have written :-
body {
font-family: 'Open Sans', sans-serif;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
article {
padding: 40px;
}
article img {
text-align: center;
box-shadow: 6px 6px 8px #777;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
article p {
font-size: 16px;
}
.img-responsive {
max-width: 100%;
height: auto;
}
/* The following code is used to create same-sized columns
in a multi-column layout.
Code from:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
*/
/* columns of same height styles */
.container-xs-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-xs-height {
display: table-row;
}
.col-xs-height {
display: table-cell;
float: none;
}
#media (min-width: 768px) {
.container-sm-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-sm-height {
display: table-row;
}
.col-sm-height {
display: table-cell;
float: none;
}
}
#media (min-width: 992px) {
.container-md-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-md-height {
display: table-row;
}
.col-md-height {
display: table-cell;
float: none;
}
}
#media (min-width: 1200px) {
.container-lg-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-lg-height {
display: table-row;
}
.col-lg-height {
display: table-cell;
float: none;
}
}
<!-- DO NOT ALTER THIS TEMPLATE. FILL YOUR CODE IN THE SPECIFIED PLACES -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet" />
<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>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#btn-id">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- FILL YOUR CODE FOR BRAND AND TOGGLE (ICON BAR) FOR RESPONSIVE NAVIGATION BAR -->
<a class="navbar-brand" href="#">MyBrand</a>
</div>
<!-- Collect the nav links, forms, and other contents for toggling -->
<div class="collapse navbar-collapse" id="btn-id">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<div class=" ">
<div class=" ">
<section class=" ">
<article>
<!-- WRITE YOUR CODE FOR RESPONSIVE CIRCLE IMAGE -->
<img class="img-responsive img-circle" id="image" src="https://www.capecod.com/wp-content/gallery/nature-walk-through-harwich-conservation-trust-lands/SK_West-Harwich-Nature-Walk-Through-Consevation-Trust-Lands_10.23.18-7.jpg" alt="Nature Image" />
</article>
</section>
</div>
</div>
<footer class="footer">
<p class=" ">Lorem ipsum</p>
</footer>
</body>
</html>
Try changing the id of collapsable div from "bin-id" to "bs-example-navbar-collapse-1" so it will look something like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
This will remove the following errors:
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
For the error,
Fail 3 : Set 3 icon bar for the 'span' tags
Try removing the first span (Toogle Navigation) as only 3 span tags are required.
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I created a navbar in Bootstrap and I want to make it a little bit smaller.
I somehow did that, but my content of the navbar is bigger then it should be.
I don't know how to make it smaller to fit in the navbar or should it fit auto?
Code:
<nav class="navbar-default">
<div class="container-fluid" style="padding-left:55px; height:45px;">
<div class="navbar-header">
<a class="navbar-brand" style="margin-bottom: 2px;"><i class="fa fa-facebook-square" aria-hidden="true" style="font-size:23px;" id="fb"></i></a>
</div>
<ul class="nav navbar-nav">
<li><input type="text" class="input-sm" id="usr" style="margin-top: 9px;" placeholder="Pronadjite prijatelje"></li>
<li id="nameprofile"><img src="fb%20profile%20image.jpg" width="25px" height="25px" style="margin-right: 9px;">Ime</li>
<li>Pocetna stranica<span class="badge">2</span></li>
<li id="liprijatelji"><i class="fa fa-users" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="findfriends"></i></li>
<li id="liporuke"><i class="fa fa-comments" aria-hidden="true" style="font-size:20px; color:#1d2129;" id="poruke"></i></li>
</ul>
</div>
</nav>
Text in code is not in English because I don't speak English.
Sorry if I made a mistake.
Ok, guiding myself from the bootstrap tutorials, you would need to have <nav class="navbar navbar-default"> instead of <nav class="navbar-default">. One of the reasons of the unexpected behaviour might be because you´re not adding this class.
Since you are using the .navbar class, then all you need to do is add the following css that overrides the default values of navbar.
.navbar{
min-height: 50px;
height: 50px;
}
If you look at bootstrap defaul CSS the .navbar default values are:
.navbar {
position: relative;
min-height: 50px; //This line is the one that defines the min height, which we overrid in the code above
margin-bottom: 20px;
border: 1px solid transparent;
}
You might also need to add max-height to your css, since the container might grow if your content is bigger than your container.
Here is a working example
I saw this post Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?
Tried it but it didn't help.
Using it in asp.net project.
Site.Master code:
<head>
<style>
.body {
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.navbar {
margin-bottom: 0;
background-color: black;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: black !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #fff !important;
background-color: #fbb534 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body data-target=".navbar">
<header>
<nav class="navbar navbar-default" style="margin-bottom: 0px; clear: none; background-color: white; border-color: white;">
<div class="container" style="margin-left: 0px;">
<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>
<img src="../../Images/Logo.png" width="130" height="40" style="margin-right: 40px;" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li style="padding-left: inherit"><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li style="padding-left: inherit"><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li style="padding-left: inherit"><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li style="padding-left: inherit"><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li style="padding-left: inherit"><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
after 1-2 seconds:
----------------------EDIT STARTS HERE-----------------------
Note: Bootstrap css were not used, extremely sorry for that.
Plain css and html in site.master page are used.
Ok, So I finally, kind of, found the issue myself.
Trials: Tried all the suggestions provided in the answers, Thank you all for that but they didn't help.
Issue: I created an empty aspx page with no content in it and loaded it with master page. What I see is below:
On the other hand when the page with some content loads it sets the navbar correctly like this, looks like when the Admin page loads it is empty for 1-2 seconds and when it renders it sets the correct style:
So what I did is I put below code to make it less ugly :(
li{
display: inline;
}
which now will show up like :
Any other suggestions guys ?
Your code is missing the part where you include Bootstrap, and that is the main point. Your navbar is styled by Bootstrap, so it won't be styled until the Bootstrap's CSS file is loaded.
Put the Bootstrap CSS in the <head> part of your page in a <link> element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
This is your code without bootstrap: https://jsfiddle.net/xa2ychxn/ and this is your code with the Bootstrap's CSS file in the <head> section: https://jsfiddle.net/edaovwjt/
You are using class names from Bootstrap (navbar navbar-default). As you don't have any CSS code to make the navbar inline, when you finally get the expected result that means that something else gets loaded: that's Bootstrap.
I think you are loading something in the page using Ajax, and the content that is loaded contains bootstrap's CSS. That's why you don't know that you are using it, and why it is loaded some time after the page rendering.
Have you tried putting the styles in a CSS file or in a style tag in the head?
<html>
<head>
<style type="text/css">
.navbar {
margin-bottom: 0px;
clear: none;
background-color: white;
border-color: white;
}
.container {
margin-left: 0px;
}
.navbar-header img {
margin-right: 40px;
width: 130px;
height: 40px;
}
.navbar-left li {
padding-left: inherit;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<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>
<img src="../../Images/Logo.png" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Alternatively, if you do have a linked CSS sheet, check the styles applied to the classes in your header. Some of the elements are probably rendered according to the CSS styles first, then the inline styles are overriding them as elements are rendered.
I know this might be a longshot but can you try using Minified versions of the bootstrap and jquery.Just give it a try and let me know
Try using these :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem seems to come from external style sheets.
During the brief period where the LI elements are displayed vertically, i guess you're still busy loading CSS from external files.
Does it still happen if you add the following CSS to the style element in the head of your page?
.navbar ul
{
list-style:none;
}
.navbar ul li
{
display:inline-block;
}
.navbar ul li a
{
/* i have no idea if this is right. it is just an approximation. */
/* you will have to fiddle with it until it is right. */
padding:10px 20px;
}
(or see this codepen)
Working with an angular and bootstrap navbar. When the screen is resized horizontally below 768px the search field at the right falls down to the line below. I am trying to keep it in the top line and just let the navbar overflow to the right.
Here's a plunker! http://plnkr.co/edit/krAGXP6JEVZpLFNvRlsw?p=preview
I am using Chrome 32 to test this widget.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Umbrella_Corporation_logo.png" style="width: 31px;height:35px;"/>
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Foo
</li>
<li>
Bar
</li>
<li>
Baz
</li>
<li>
Bop
</li>
</ul>
<div class="pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Why does this silly search field insist upon dropping down a line on smaller screens?
Corrected: The input-group-btn seemed to be the cause of the problems for me.
Adding this:
.navbar-form .input-group-btn {
display: block;
}
.navbar-form .input-group {
margin-right: 30px;
}
Ensured the search never jumped down.
Plunker here
Looks like it was a combination of a few items. First being the min-width width media query for a few items floating only when the screen size is above 767px. ( you could put these inside a max-width instead of leave them default, however you want to set it up )
.navbar-nav,
.navbar-nav > li,
.navbar-header {
float: left;
}
And then this little bugger's width within a min-width query throwing a wrench into the flow set on another media query
.input-group-btn {
width: 1%;
...
...
}
Again, I set a few items without the query, which you could stuff into a max-width query or just have them default.
http://jsfiddle.net/evanbriggs/9xtLtrr4/
Evan and mccannf helped me to identify that my width styles were being updated but their values weren't being accurately reflected within the chrome dev tools. Building from their recommendations I found that the following addition to my css was the best solution.
.pull-right .navbar-form .input-group .input-group-btn {
width: auto;
}
My main issue with using CSS libraries is that they often overwrite custom CSS styles that I specifically set. For example, here I have a list that exists within a Bootstrap expand/collapse menu:
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
I want to set my own font color, so I use the following CSS:
nav li {
font-size: 16px;
color: #004687;
}
But when I view in Firefox's Inspector, I see the color I have chosen is being overridden by Bootstrap.
My custom CSS occurs after the Bootstrap files have been loaded in the of the HTML document.
How do I prevent this happening without setting style="color: #004687" to every element?
EDIT: Thanks for the suggestions thus far, but none have been successful. I'm pasting the full original code to give you greater detail:
<div class="container">
<header class="navbar navbar-static-top bs-docs-nav">
<div class="col-md-4 visible-xs" id="mobile-nav-outer">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Menu
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
</nav>
</div>
</header>
</div>
My CSS is included like this:
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#mobile-nav-outer {
border: 1px solid #CCC;
background-color: #FFF;
}
#mobile-nav-inner {
border: 1px solid #CCC;
background-color: #FFF;
margin: 3px;
}
nav li {
font-size: 16px;
color: #004687;
}
.nav-mobile-link {
font-size: 16px;
color: #004687;
}
</style>
</head>
EDIT 3: I have found a cheap workaround by using ID's rather than classes which works due to CSS specificity (ID's override classes). This isn't a very clean solution and I'd still like to know why I cannot override the Bootstrap classes with my own.
Overwrite it with additional class added to the list:
<ul class="nav navbar-nav custom-class">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
and in your custom styles:
.nav.custom-class li {
font-size: 16px;
color: #004687;
}
try to place custom css file below bootstrap.css.
or
nav li {
font-size: 16px !important;
color: #004687 !important;
}