I'm experimenting with Bootstrap 3.2. I'm trying to create a fixed at top navigation bar but I'm running into two problems:
The navigation bar overlaps the content below it.
The navigation bar seems to be going far off the screen to the right. This makes my button in the navigation bar not visible unless the window width is dragged to a smaller size.
For the first problem, I've followed the Bootstrap example tip by adding a class to my css file, including this file below the Bootstrap css file in the html document, and then referring to the class.
.navbar-height{
body{padding-top: 200px;}
}
<body class="navbar-height">
Though, this seems to do nothing (as you can see I specified the number really high hoping to see a dramatic change, which did not occur).
Here's my the navigation bar:
<header id="header-navigation">
<div id="nav-bar-container">
<nav id="nav-bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div id="nav-item-container" class="container-fluid">
<div id="drop-down" class="navbar-header">
<button type="button" class="btn btn-default navbar-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#user-dropdown">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
<div id="user-dropdown" class="navbar-collapse collapse">
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
As a quick break down of the above code, I have a <header> tag which will hold the navigation bar. Within this <header>, I have a containing <div> (id="nav-bar-container") which only purpose is to act as a container for the navigation bar (maybe I'll add something else to the header and want to keep the bar seperate). Then, I have the actual <nav> which has the appropriate classes (or so I think): "navbar navbar-default navbar-fixed-top". The next <div> (id="nav-item-container") holds the components of the navigation bar. The following <div> (id="drop-down") contains the button (which seems to disappear at full-screen) and a link with a "brand", which always seems to be visible. The last major <div> contains the "drop down" content for when the button is pressed.
My Question: why is my navigation bar overlapping the content below it and over extending to the right hiding the button?
Ok, first thing, you don't need the <header> tag, so feel free to remove that.
Second, from the Docs on navbar-fixed-top, you need to have padding:
body { padding-top: 70px; }
Notice you applied it to the heading style; that won't work. Apply it to the body and it works fine.
As far as the 2nd issue, I don't actually see any horizontal scrolling when I removed the
<header> tag, so I think that may have been causing an issue.
Checkout this Bootply example:
Bootply Example
To see what I mean. It's your code with the tag removed. Hope that helps!
Change..
.navbar-height{
body{padding-top: 200px;}
}
to..
body.navbar-height{
padding-top: 200px;
}
You want the padding on the body itself. This will push you body down 200px giving you a gutter at the top for your fixed navbar.
most likely you'd want to adjust this padding depending on the actual height of your navbar.
As for problem number two, where I believed the navigation bar to be overflowing off the screen to the right, was just a mistake in the layout of the code. I was grouping the button I wanted to display on the right with the brand in the "navbar-header". What this does is display the brand but use that button only on a mobile screen to hide or show its associated dropdown. That is why I was only seeing the button when I made the width smaller by dragging the window. To fix this problem I removed the button and placed it within the appropriate code block. So, my "navbar-header" now looks like this:
<div id="drop-down" class="navbar-header">
<div id="home-button" class="navbar-left">
<a class="navbar-brand" href="#"><img alt="Brand" src=""></img></a>
</div>
</div>
Now, next within the id="nav-item-container" parent div, I create a list of items (ul). This list contains the items within the navigation bar and has the classes "nav navbar-nav navbar-right". Each list item (li) within this list is an item within the navigation bar. Dropdown buttons and their contents must be contained within the same list item (li). Make sure the parenting list item to the dropdown elements contains the class "dropdown". Then, the button or link should have the "dropdown-toggle" class applied to it. And the dropdown items themselves (which too can be a list of items and often is) should have the class "dropdown-menu". For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<ul class="dropdown-menu" id="dropdown-items" role="menu">
<li>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="" alt="icon"></img>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Placeholder</h4>
<p class="list-group-item-text">Placeholder</p>
</div>
<div class="list-group-seperator"></div>
</div>
</li>
<li><span class="glyphicon glyphicon-log-out"></span></li>
</ul>
</li>
</ul>
Note, in the snippet I didn't include the parenting nav, div, or header so it may not work exactly how it should. Also, I figured the majority of this out on my own by referencing the Bootstrap component page, as well as, the Bootstrap material design page (a plugin to Bootstrap that gives everything the Google Material Design look and feel). So, I'm not sure if all the "rules" I stated are mandatory or if there are other ways to achieve this.
As for problem number one, I just made a silly mistake with the css and the two other answers provided correct ways of fixing it. All I had to do was fix the body css like so:
body{
padding-top: 200px;
}
Related
I'm trying to create a collapsable div that holds thumbnails for images. So far, everything works except that the div content (the thumbnails) flashes and disappears upon collapse and expand. The content is there, it just doesn't stay. If you're quick enough you can click the thumbnail as it flashes and it takes you to the image path. My div looks like this:
<div class="col-lg-8 col-lg-offset-2">
<div id="images" class="accordion-body collapse">
<a href="../images/1953.01.09.00.jpg" class="thumbnail">
<img src="../images/1953.01.09.00.jpg">
</a>
</div>
</div>
And my button:
<a class="btn accordion-toggle" data-toggle="collapse" href="#images">Images ยป</a>
You can look at my full code here: https://jsfiddle.net/krbylit/jttyq8jv/
Add this to your CSS
.collapse.show {
visibility: visible;
}
For some reason your bootstrap doesn't toggle this property correctly
sometime the case might be some css changes the color of the text inside to white so simply applying the inline css might help :
style="color : black; "
I have a bootstrap drop down on my modal dialog.
After clicking on drop down button drop down menu appears under form.
Is there any way to fix this issue, but without using "position:fixed",because by using fixed attribute I am facing with other issues.
<div id="dialog" title="Basic dialog" ng-show='showDialog'>
<div class="container">
<h2>Dropdown</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
<li>DDDDDD</li>
<li>EEEEEE</li>
<li>FFFFFF</li>
</ul>
</div>
</div>
</div>
See the dropdwon plnkr
The problem is that the dialog, wich is a div, efectively "contains" the dropdown and all it's contents, so the drowpdown stacking context is surrogated to it.
You can add this css rule to overcome your problem, but take it carefully so it doesn't have any side effects in other dialogs on your app:
<style>
.ui-dialog, #dialog, #container { overflow:visible; }
</style>
You also have a great article here explaining stacking contexts as Z-Index isn't what most people think...
I'm trying to structure a Bootstrap nav bar such that I can have both left and right aligned content, while working for both desktop & mobile screens. I have a feeling like I'm trying to have my cake and eat it too here, but I would imagine that this should be possible.
Note that in the screenshots below, the hamburger menu icon is just a custom image (e.g., not the default Bootstrap nav bar collapse icon).
This is what I want my mobile view to (roughly) look like:
But what I'm getting is this:
Here is the desktop version, only for comparison:
And finally, here is the code I'm working with:
<div id="navbar" class="navbar navbar-custom navbar-custom-bordered-header">
<div class="navbar-header">
<div class="navbar-brand">
<img class="navbar-menu-button-custom" src="/assets/menu_button.png"/>
</div>
<a class="navbar-brand navbar-custom-brand" href="<%= root_path %>">My App</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 15px; width: auto;">
<div class="navbar-brand">
<a id="search" href="#"><span class="glyphicon glyphicon-search" style="color: white;" aria-hidden="true"></span></a>
</div>
</ul>
</div>
I'm just not sure what I need to do to achieve my desired view above. I can see that the problem appears to boil down to navbar-header's width being too large:
But I'm not sure how to enforce a smaller width for navbar-header or just one that hugs navbar-header's content. Any thoughts?
Add this to your css file.
#media (max-width: 768px) {
.navbar-header {
max-width: 250px;
}
}
You may have to change 768 and 250 values according to your bootstrap setting. But most probably this will do.
I am using bootstrap 3 on a Rails 4 app.
I have a "normal" fixed navbar on the page headers. For the moment, when the viewport decreases (small device), all menu titles disappear and go into the "three bars" icon like here: http://getbootstrap.com/examples/navbar-fixed-top/ (try on a small screen/viewport).
Is it possible with bootstrap 3 to NOT make all menu titles go into this three bar icon, but to replace all texts by very small icons (for example Help would be replaced by a " ? "icon) so that there is enough space for all of them, when the viewport is very small.
Is there something already built-in inside Bootstrap allowing to do that ? or maybe some external libraries that play well with BS3?
thanks
That should not be to hard, and no need for a framework. You can use the responsive utility classes provided by BS3. With those, you can hide the icons on big screen and show the labels, and the opposite when on small screen. Your navbar markup would look something like this:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">
<i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
<span class='hidden-xs'>Link</span>
</a></li>
<li><a href="#">
<i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
<span class='hidden-xs'>Link</span>
</a></li>
</ul>
</div>
</nav>
And a small line of css is required to prevent the li from being displayed as block on small screens. Something like this should do the trick:
.nav>li {
display: inline-block;
}
And an example to demonstrate: http://www.bootply.com/a17IsJ0Pop
How do people typically style the output of the Twitter Bootstrap collapsible navigation?
The standard structure is as follows.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project name
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
For example, if I would like to style .nav li a, I can do so with that CSS selector, but that also then changes the styling of the mobile navigation. Bootstrap doesn't appear to add any useful combination of classes to denote different ones.
<div class="nav-collapse collapse"> <!-- Closed by button -->
<div class="nav-collapse on collapse"> <!-- Open by button -->
<div class="nav-collapse on collapse"> <!-- Closed by resizing window to > mobile -->
I find myself having to effectively implement the bootstrap styles again for the mobile version because I can't seem to find a combination of classes which allows me to style just the main nav rather than the dropdown. For example, the dropdown can be styled with .nav-collapse.on
This is probably a really simple thing to do but can't seem to work it out!
I have delt with this issue myself and there are range of solutions.
In order I would put them something like:
Involved but worth it - I have switched to a workflow that involves building bootstrap. I'm using bootsrap-sass with compass and grunt etc. This handles the task of minifying, concatenating etc, and in this case all the changes you want to the _variables.scss or .less etc..
Cheap But Effective - I have used a very simple hack to just make a second menu and add .hidden-phone, .visible-desktop etc.. This allows you to also make unique touch buttons and maybe forgo collapse. Kinda like they do here (It's not bootstrap but its the same concept)
Media Queries - My last css in the list is always my responsive.scss or a file full of media queries, this way I can change whatever I want to override from anything done before for whichever device.
Simplest solution would be to wrap the .navbar div for your main nav in a div with a custom class -- like, say, "mainnav". Then you can write styles to things like ".mainnav .nav li a".
If you can touch the bootstrap structure itself, you could skip the wrapper div and simply add the class "mainnav" to the "navbar" div, and then write styles like ".mainnav.navbar .nav li a".
The menu is broken into two parts, a structure and a styling. If you remove the styling you are left with a naked bootstrap menu that is easy to style. Remove the "navbar-inner" call and it will strip out all the styling for you. I just rename the call on the menu div from navbar-innner to navbar-inner_OFF. That shuts off the -inner css and also reminds me I rurned it off when I look at the menu code.