I have a navbar build with Twitter Bootstrap 3.1.1. When on an iPhone or iPad the dropdown menu hides behind the slider image. It has a position absolute and a z-index of 1000.
When on a desktop it goes well, it goes over de slider images.
If you go to http://sitegeregeld.nl/. You see that the dropdown menu disappears behind the slider on the homepage on an iPad and iPhone. I don't see a sollution.
What goes wrong?
I was having the same problem(only hiding behind content on ipad), and this solved it:
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
I'm using a bootstrap/wordpress framework that has it's own css style sheet that sets the navbar to position: relative.
found answer here: z-index issue with twitter bootstrap dropdown menu
Related
I need help with bootstrap navbar collapse. When I click the burger menu, there is less than a second lag before it fully expands. Also, if you click very fast, like multiple clicks on the burger icon, the x icon animation gets delayed, and the x becomes the closed icon rather than the burger icons, which is frustrating because I like to have a bit of delay with my nav collapse. please check my link below for a live version :
My website link
So basically I added ul to the nav-collapse so now its .navbar-collapse ul { height: 100vh; } so the solution is to set the height of the ul to 100vh, not the height of the whole navbar-collapse.
I'm working on a live mockup page but running into issues with the navbar showing on top of the logo image. I've researched for answers and tried them but are not working as expected. How can I fix it so the navigation isn't layered on top the logo? I'd also like to either adjust the nav to the top of page when in mobile size, logo becomes hidden or keep the logo visible on the navbar in mobile size. This will also require media query breakpoints to smooth the transition of desktop to mobile. I'm kind of new bootstrap. Any help is appreciated. Thanks
link to image mockup
link to live webpage mockup
link to css override
Looking at the live webpage mockup link, you have
.navbar-fixed-bottom,
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
the z-index is overlapping all of your elements.
add
position: relative;
z-index: 99999;
to your .row-img class
I'm starting a new project with Bootstrap 3, and I need that clicking on "Sandwich" icon in responsive view, will open collapsed navbar from left side off-canvas instead from the top like in default behaviour.
I'm surprised when I see that in official documentation there is only this Example, that anyway is putting off-canvas a sidebar and not main navigation bar...
Can you help me?
In your custom css:
.navbar-toggle {
float: left;
margin-left: 15px;
}
This will basically override the bootstrap css that forces the toggle to float right. Make sure the put your custom css link tag AFTER the bootstrap css link tag.
I am trying to integrate twitter-typeahead with bootstrap3.
I want to use a typeahead inside a navbar.
The problem appears only when navbar is collapsed and only in mobile devices (issue at least in iPhone safari and BB10 browser), and it is the following:
The typeahead dropdown appears under the rest of the navbar content:
BlackBerry10 browser
Safari on iPhone
I tried tweaking z-index and position:
.twitter-typeahead .tt-dropdown-menu {
position: absolute !important;
z-index:9999 !important;
}
I have replicated the issue here:
http://jsfiddle.net/zZpQg/3/
Why is this happening only in mobile small devices?
How can I get the typeahead dropdown to appear on top of the rest of the links?
KindRegards
I also added
.tt-query {
backgroud-color: #fff !important;
}
for the input type.
I'm using Twitter Bootstrap and its responsive design for the typical Twitter Bootstrap navbar menu at the top.
In there i have a few links and a dropdown menu. When i resize my browser to 768px or less, it hen transforms into a new sort of nav menu.
This all works fine out of the box, but what i'd like to have is that the dropdown menu is also expanded.
What happends now is that the dropdown menu is still collapsed. When i open it, it then creates a scrollbar inside that menu container which i really don't like.
Here's a screenshot of what i mean:
Example: http://getbootstrap.com/examples/jumbotron/
How can i remove the open/close Dropdown link, and have all of its items listed inside that menu so that it doesn't create an ugly scrollbar on the side of the menu?
You could split your problem in three parts:
1. the scrollbar
By default the dropdown menu get a fixed (max) height of 340px (and a overflow-y:auto, see also: Twitter bootstrap 3 navbar navbar-right outside navbar-collapse).
You can undo this max-height by remove it (line 52 max-height: 340px;) from navbar.less and recompile Bootstrap. Or add some css after Bootstrap's css in your document:
#media(max-width:767px)
{
.navbar-collapse {
max-height: none;
}
}
Note when the height of the menu becomes the height of your screen, you can't scroll your content due to the fixed position of your navbar.
2. open the dropmenu on collapse
On the first sight you should add an open class to the dropmenu on collapse, but the clearmenus function of dropdown.js will remove this class. Adding a display:block will show the dropdown menu, but its state /display will be like non collapsed.
A solution will be to add a class with the same styles as the open class which won't be remove by the clearmenus.
$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
$('.navbar-collapse .dropdown-toggle').parent().addClass('opened');
});
To give the opened class the same styles as the open class you will need to change your .less files and recompile Bootstrap after it.
in navbar.less (line: 215)
// Dropdowns get custom display when collapsed
.open .dropdown-menu, .opened .dropdown-menu {
in dropdown.less (line: 119)
// Open state for the dropdown
.opened, .open {
resize
With the above the dropdown menu stays visible after undo the collapse (by resizing the screen) to prevent this add some css after Bootstrap's CSS (you could also add this to your Less files):
#media(min-width:768px)
{
.nav > li.opened .dropdown-menu {display: none;}
.nav > li.open .dropdown-menu {display: block;}
}
styling of the links in the dropdown
Your navbar use navbar-inverse to style it (see also: https://stackoverflow.com/questions/18936357/using-multiple-navbars-with-twitters-bootstrap-3/18936358#18936358)
Navbar-inverse will be defined in navbar.less too. To set the link colors for the opend class too, use:
#media (max-width: #screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu, .opened .dropdown-menu {
3. remove the dropdown link
css after Bootstrap's CSS:
#media(max-width:767px)
{
.nav > li > a.dropdown-toggle{display:none;}
}
Demo: http://jsfiddle.net/pgK4y/
See also: https://github.com/twbs/bootstrap/issues/10758
for the dropdown opened by default on mobile / small resolutions,
here is another approach using jquery that doesn't involve messing with less code or css.
tp://stackoverflow.com/a/23202921/1174172