My Bootstrap 3.3.0 navbar wraps into two rows, apparently when width is less than #screen-md, even though there is plenty of space between left and right for it to shrink/use. How can I change it so that it doesn't wrap prematurely?
I've seen several questions asking about how to change the breakpoint for collapsing into a single column. I'm not asking about that, as my collapse is set to #screen-sm and I'm fine with that.
Right before the wrap. I can even insert another element on the right and it causes no problem.
Right after:
Here's my HTML:
<header class="navbar navbar-default navbar-static-top bs-docs-nav" id="top" role="banner">
<form ...>
<div class="container">
<div class="navbar-header">
...
</div>
<nav id="mm-navbar" class="collapse navbar-collapse">
<!-- Free-text Search -->
<div class="text-search input-group">
<input id="search-input" type="text" class="form-control"
placeholder="Search" name="q" value="{{ query }}" />
<span class="input-group-btn">
...
</span>
</div><!-- /text search -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
...
</li>
<li>Calculate</li>
<li class="dropdown">
...
</li>
<li> <a id="login_button" href="{% url 'account_login' %}">Login</a> </li>
<li>
<span class="fa feedback-button fa-envelope" data-toggle="modal"
data-target="#feedback-modal" title="Send Feedback"></span>
</li>
<li>
<span class="help-button glyphicon help glyphicon-question-sign" data-toggle="modal"
data-target="#help-modal" title="Help"/>
</li>
</ul>
<!-- Advanced Search -->
<div class="collapse" id="advanced-search-bar">
{% include "search.html" %}
</div>
</nav>
</div>
</form>
</header>
This question seemed related but pull-left and pull-right did not work for me.
Note the wrap introduced at < 992px (moving from screen-md into screen-sm), is accompanied by a large amount of margin on either side of the broken navbars (pic 2 above). The problem is that this entire navbar is wrapped in .container, which at this breakpoint sets a fixed width which the navbar can no longer fit into.
The solution is to use a .container-fluid instead (or no container, although I'm not sure of the ramifications of that).
Related
How can I have both my search box and badge horizontally in single row in the navbar ? I'm using materialize CSS
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="inline">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
If you upload your problem into a CodePen, it is easier for people to try out your code, adapt it and help you. It doesn't take long, I added your stuff in around 5 minutes, with taking care of scripts and links, but it will be a great help for people who want to help you solve your problem.
So, some general stuff about the materialize grid:
To make text fields inline, you need to add the inline class to the input-field-div (can be found in the examples of Materialize Text Inputs). Adding an enclosing div does not work
Columns only work with an enclosing row, which the <form> does not have. This is also part of your problem, more down below
The grid is based on 12 columns. So the form with col s12 will take up the complete row
If you want to split the form 50:50, you need to put the form in their own container. If not, the col will assume, that it is referencing the container around the whole navbar (more about Grids in Materialize
An unordered list (ul-tags) should always have list-items (li-tags) for each individual part of the unordered list
So, regarding your problem: Add list items to your unordered list, one for the badge, one for the search form. Then, you also need to add a div with the row-class to your form, as well as a container for the elements to get back into a local context. Add the inline-class to the right element, and you are good to go. Here's a CodePen with a working example. Hope it helps and you understand why it didn't work before!
edit: update codepen link
Try by this way
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
Add row class instead of inline
I am trying to make my h1 text not squished to the left. I am also using bootstrap so I'm not sure if that effects anything:
h1 {
margin: 5px 40px 10px 70px;
}
<html>
<head>
<script src="https://use.fontawesome.com/d712ea1844.js"></script>
<title>About Mike</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/a1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<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="#">About Mike</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Resume</li>
<li>Artifact 1</li>
<li>Artifact 2</li>
</ul>
</div>
</div>
</nav>
<h1 id="annoyingtitle">Examples of Work</h1>
<p id="p0">This is an example of a paper I wrote while I attended Frankline Pierce University. In this paper I look at the lenses at which mental illness is viewed in different parts of the world.</p>
<br/>
<A id="mentallink" HREF="mentalillness.docx">Mental Illness Cultural Lenses and Barriers</A>
<br/>
<p id="p1"> Reflection: Writing this essay was easily one of my hardest assignments I have ever done. It involved levels of research that I hadn’t done before. I learned how to form an argument while drawing evidence from multiple sources. This has helped me in my research and writing skills. My favorite part of writing this paper was doing the research. On this assignment we were allowed to pull sources from almost anywhere as long as they were credible, I enjoyed being able to go as far as my mind could take me. The one risk I believe I took with this project was the structure and flow. The entire assignment was 9 pages long. This made my biggest problem getting it all to flow together and getting my ideas in the right order. If I could re-do this assignment I wish I would write a better conclusion to the paper. </p>
<br/>
<div id="annoying">
<ul id="list1" class="text-center list-unstyled">
<li class="col-md-4"> <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
<br>
#M
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
<br>
mike
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-envelope" aria-hidden="true"></i>
<br>
email#email.com
</li>
</ul>
</div>
</body>
</html>
Your margin is working. You want your h1 not squished to the left? How about horizontally centered? (I usually put margin bottom on headers though)
h1 {
margin: 0 0 10px 0;
text-align: center;
}
Make sure you are saving the file, refreshing your browser, maybe clearing your cache, close your browser and re-open, do the same for your text editor, etc. Your code does work.
Make sure the local URL is correct in your browser, etc., or post your entire code. Try a different browser. There either has to be an element that doesn't have a closed tag, another CSS file that is overriding your h1 elements, or something that you have not posted that is conflicting with your styles.
Please refer to the code fragment below. It is a simple navbar.
Unfortunately, the collapse-toggle button appears above the brand (because it breaks the line, behaving like a block), what is unexpected. The expected behavior is that it appears beside. Further, if I try to float it with .navbar-right, it doesn't work. What could it be?
http://jsfiddle.net/X3pVX/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="btn btn-default btn-sm navbar-btn" data-toggle="collapse" data-target="#navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a class="navbar-brand" href="#">Projeto Si</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<form class="navbar-form form-inline navbar-right">
<div class="input-group" style="max-width: 400px">
<input id="filter" class="form-control input-sm" type="text" placeholder="O que você está procurando?"/>
<span class="input-group-btn">
<button id="clearfilter" type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></button>
</span>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Hey whats sup? I'm from Brazil too.
You only have the html file?
if yes you need to use css. never use style on html, HTML is for content and CSS for style.
create a css file and put the code below between the head tag.
<head>
<link rel="stylesheet" type="text/css" href="FileName.css" />
</head>
after that choose the class that you want to modify the position and try the code below
.navbar-right {
position:absolute;
left:150px;
}
try different pixels values and see which one works better for you.
If you don't know anything about css i recommend http://www.w3schools.com/
study there just for have a notion.
My problem
I am using Bootstrap 3.0 and need to use a fixed navbar, which will stay at the top of a DIV on the left side and NOT extend all the way 100% of the width of the window (like I usually see Bootstrap's example do). I have some very simple code below, using ASP.NET MVC 4 which will explain the RenderSection areas.
I have included an image which shows what I am trying to do. Currently the navbar is only extending about 75% of the left side container, not the full 100% of that left side container like I want it to.
Like I said above, I want the navbar to be fixed so when you scroll it stays in one spot within that left DIV.
Any tips/hints would be greatly appreciated! Thanks!
I also saw this question (Navbar fixed to top but not full-width) but I do not want to have to dynamically maintain this navbar with a fixed pixel width in media queries. I'd prefer it to fill out the entire left side DIV that contains it.
(http://i.imgur.com/YLzmkHp.jpg)
My code
<div class="container">
<div class="row">
<!--LEFT SIDE-->
<div class="col-md-9">
<div data-spy="affix" data-offset-top="0">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul role="menu" 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>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
</nav>
</div> <!--end data-spy=affix-->
<!--the LeftSide below just contains basic placeholder text in a <p> tag-->
#RenderSection("LeftSide", true)
</div>
<!--RIGHT SIDE-->
<div class="col-md-3">
<!--the RightSide below just contains basic placeholder text in a <p> tag-->
#RenderSection("RightSide", true)
</div>
</div>
</div>
Partially Solved (update)
I was able to solve my main problem that I listed above by using this bit of jQuery
$(window).resize(function () {
var w = $("#leftSide").width();
$("#navWrapper").css("width", w);
});
But this does not work within an iFrame.
If anyone has any insights on solving this for use in an iFrame, it'd be greatly appreciated.
Have you tried placing your navbar and main content area in one column and then your right sidebar in a column by itself? Then add a bit of CSS to correct for the navbar position and adjust for responsiveness.
LINK: http://www.bootply.com/ZJCGxiUD6g
I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>
</head>
<body>
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><i class="icon-home"></i>Home</li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
</li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
<i class="icon-eye-open">
</i>Assembly Elections
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Assembly Elections 2013</li>
</ul>
</li><li class="divider-vertical">
</li><li ng-class="{active:section=='tags'}"><i class="icon-th"></i>Constituecy</li><li ng-class="{active:section=='discuss'}"><i class="icon-time"></i>Election News</li><li class="divider-vertical"></li><li><i class="icon-bell"></i>Candidate</li></ul></div>
</div>
</div>
</div>
<div class="container" >
<ul class="nav nav-pills">
<li class="active">
Popular
</li>
<li>Trending</li>
<li>Latest</li>
</ul>
</div>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap-dropdown.js"></script>
<script src="~/Scripts/Collapse.js"></script>
</body>
</html>
This is handled by adding some padding to the top of the <body>.
As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px;
}
Also, take a look at the source for this example and open starter-template.css.
I guess the problem you have is related to the dynamic height that the fixed navbar at the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbar needs to use more height so this text doesn't overlap with the navbar menu. As the navbar has the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbar height changes which would happen in the following case scenarios:
The page is loaded / reloaded.
The browser window is resized as this could hit a different responsive breakpoint.
The navbar content is modified directly or indirectly as this could provoke a height change.
This dynamicity is not covered by regular CSS so I can only think of one way to solve this problem if the user has JavaScript enabled. Please try the following jQuery code snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize() after any change in the navbar content:
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Just define an empty navbar prior to the fixed one, it will create the space needed.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>
It happens because with navbar-fixed-top class the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behind the navbar.
You need to apply padding-top or margin-top to your container, based on your requirements with values >= 50px. (or play around with different values)
The basic bootstrap navbar takes height around 40px. So if you give a padding-top or margin-top of 50px or more, you will always have that breathing space between your container and the navbar.
I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.
<style>
body{
padding-top:60px;
}
/* fix padding under menu after resize */
#media screen and (max-width: 767px) {
body { padding-top: 60px; }
}
#media screen and (min-width:768px) and (max-width: 991px) {
body { padding-top: 110px; }
}
#media screen and (min-width: 992px) {
body { padding-top: 60px; }
}
</style>
One note, when my menu width is between 768 and 991, the menu logo in my layout plus the <li> options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.
Hope this helps...
I know this thread is old, but i just got into that exactly problem and i fixed it by just using the page-header class in my page, under the nav. Also i used the <nav> tag instead of <div> but i am not sure it would present any different behavior.
Using the page-header as a container for the page, you won't need to mess with the <body>, only if you disagree with the default space that the page-header gives you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="navbar-right">
</div>
</div>
</nav>
</div>
<div class="page-header">
<div class="clearfix">
<div class="col-md-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<form role="form">
<div class="col-lg-6">
<div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
<div class="form-group">
<label for="InputName">Enter Name</label>
<div class="input-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Enter Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputEmail">Confirm Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<div class="form-group">
<label for="InputMessage">Enter Message</label>
<div class="input-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
</div>
If you are using Bootstrap 5 and want navbar at top then replace fixed-top with sticky-top.
Problem solved of hidden data under navbar.
i solved it using jquery
<script type="text/javascript">
$(document).ready(function(e) {
var h = $('nav').height() + 20;
$('body').animate({ paddingTop: h });
});
</script>
Easy:
Code (JS)
document.addEventListener("DOMContentLoaded", function(){
navbar_height = document.querySelector('.navbar').offsetHeight; //get the offset height
document.body.style.paddingTop = navbar_height + 'px'; // Add the offset height to the top padding
});
StackOverflow throws an error due to the class navbar not existing.