Make Bootstrap 3 collapsed menu overlay page - javascript

I was wondering if it's possible to make a Bootstrap collapsed menu show over the page rather than pushing the page downward? I tried giving a z-index on the menu but with that, I had to make the menu use absolute positioning...bad idea. I want to stick with the route Bootstrap takes, but just make the menu overlay instead of push. Any ideas? Has anyone achieved this?
Thanks

This is how I overlaid the collapsed menu. I wrote this to override Bootstrap:
#media screen and (max-width: 768px)
{
.collapsing
{
position: absolute !important;
z-index: 20;
width: 100%;
top: 50px;
}
.collapse.in {
display: block;
position: absolute;
z-index: 20;
width: 100%;
top: 50px;
}
.navbar-collapse
{
max-height: none !important;
}
}
I used the media queries because I only wanted to affect the menu in the mobile view.
The class .collapsing is to make sure you are overlaying the page (z-index), stretching across the screen (presumably a phone) and are 50px from the top (the navbar class has a min-height: 50px).
The class .collapse.in is achieving the same as above, but for once the menu has already dropped.
What's under .navbar-collapse is to get rid of the max-height that bootstrap gives to dropdowns. I had a long menu so it may not be of need to others.

Related

bxslider next/back buttons appear at bootstrap nav menu

I'm developing a web application for a soccer team. I use HTML5+CSS with Bootstrap 3.0.3 and jQuery.
As first, on the top a menu appears, everything works fine.
So I decided to go to the news section where I added the jQuery bxslider plugin.
The problem is that when the menu is clicked and the dropdown appears, the bxslider buttons are still visible, which looks very disturbing and unuseful.
How to disable those two buttons while displaying the menu? Would a proper solution be to create an jQuery event which will hide slider temporarily or is there a CSS trick that I overlooked?
Demo: here
Resolution with the issue: 320 x 568 (small devices)
Default index.html:
After I click on the menu:
To resolve this, change the z-index of the arrows like so :
.bx-wrapper .bx-controls-direction a{z-index:100};
Give .navbar-fixed-top to z-index:99999; will make arrow in visible when menu open.
.navbar-fixed-top{
z-index:99999;
}
By Default navbar with fixed top have z-index of 1030 as you can see from below code
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
and carousel arrow have z-index 9999;
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
Now You just have to increase the z-index>9999 for your navbar for this to work by adding some custom style to overrride the default z-index of navbar.
e.g
.navbar-fixed-top{
z-index: 10001;
}

How to make collapsible sidebar sticky?

I am trying to make the sidebar in this example sticky when scrolling, for both situations (when you are using a big display and the sidebar is visible, as well as on mobile devices when you toggle the menu manually). I have followed various similar answers on this site but I could not apply them to my particular situation. For example, the following did not help:
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
Any ideas how to do it? Thanks!
adding
#sidebar .nav {
width: 95%;
position:fixed;
}
works for me
fiddle: http://jsfiddle.net/PrakharThakur/afrbbsh3/

How can I set up my menu to slide out, only when the header is hovered on?

How can I set up my menu to slide out, only when the header is hovered on? I'm looking to set it up to function exactly like this: http://adirondack-demo.squarespace.com/
So on hover, it slides out, but doesn't push the content down.
Any ideas? jQuery, or can this be done VIA CSS?
Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I can't seem to get it working).
Here is my: JsFiddle
bar is the top bar, baz is the page content and foo is the drop-down. On mouseover of bar, foo drops down without effecting the content, because it is positioned absolutely. The animation keeps it at the bottom of bar. Feel free to play with it and ask questions.
One option: if the menu is a child element of the header. In that (markup) case you could set position: relative; to the header and position: absolute; to the menu element to position the one below the other. Use the CSS :hover pseudo class to make the menu visible.
#header {
position: relative;
}
#main-menu {
position: absolute;
top: 100%
display: none;
}
#header:hover #main-menu,
#header #main-menu:hover {
display: block;
}
If you want the menu to stay open, if the user crosses the border with his/her cursor, you may use an additional wrapper around the menu. That wrapper would become the target of the display settings. You could then assign that transparent wrapper a padding of your choice. The menu stays visible as long as the cursor is within the padding of the wrapper element.
#main-menu-wrapper {
display: none;
padding: 5em;
}
#header:hover #main-menu-wrapper {
#header #main-menu-wrapper:hover {
display: block;
}

How to make Bootstrap 3 navbar not collapsible

I've been searching a lot but still didn't find anything similar.
If replace navbar-collapse with navbar I am getting the looks as if you've toggled the show collapsed menu items button.
I've also found questions how to decrease the breakpoint at which the navbar collapses, but it's not what I need.
What I need is to remove the collapsible menu generally. Any idea?
Bootstrap is displaying collapsed elements because of the way responsive design works:
The CSS code is written for the smallest viewport, and then using media queries, the design is progressively enhanced to render elements for each specific viewport.
Thus, the CSS code that is responsible for displaying the "normal" navbar (i.e. the navbar for a medium to large viewport) is wrapped around #media (min-width: 768px). That means that as soon as your viewport goes under that value, the elements revert to their original design, which is the small viewport design.
If you do not want to change the breakpoints as proposed in this question, you have a few other solutions:
Use the non-responsive Bootstrap library
Create your own navbar by studying the non-responsive one from Bootstrap and copying the relevant code.
You can put the navbar links inside navbar-header, and then add some CSS to override the Bootstrap defaults..
.navbar-nav {
margin:0;
}
.navbar-nav>li {
float:none;
display:inline-block;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
Demo: http://www.bootply.com/118426
Alternate (display scrollbar instead of wrapping): http://www.bootply.com/118304
i am having this issue and i have just solved it
this will undo the collapse
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}

CSS - Auto-height div

I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.

Categories