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;
}
Related
My Website : http://calisyo.com/product-category/?product=?/jacket-2-poche/
i have problem with my menu when i scrool hes scroll also
in this page I want the top menu to stay on the top of the page when a user/member scrolls.
so looking at your site, when I played around in the Dev tools if i commented out the "banner--stick" css it stayed at the top the whole time. I would only use the position fixed and try not to mess with JS to change the css class you the page is scrolled
use below css
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
margin-top: 0;
Try adding this CSS rule:
header#masthead.banner--stick {
margin-top: 0;
}
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/
I am using the Foundation 5 framework for a WordPress website and need to improve the responsive menu. My menu will have a lot of drop down items which as it stands at the moment will all sit on top of each other when viewed on a smaller screen. I need some sort of accordion effect with a plus button to drop down each item. If this is possible with the Foundation menu can anyone point me in the right direction?
Here is a screenshot which shows what I need:
Let´s try this one (you need to play with the rules position and font size):
note: Without code is a shoot in the dark :)
.top-bar-section .has-dropdown > a:after {
content: "+";
display: block;
height: auto;
position: absolute;
right: 0;
top: 50%;
width: 0;
font-weight:bold;
}
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.
I have a question about my jQuery Bootstrap Dropdown. I have a problem when I try open the dropdown menu and then try to right click menu, the dropdown will appear disappear. And when I try to scroll down, the dropdown not fit with the root menu.
What I want is :
Make keep dropdown show when I try to right click the menu.
Make dropdown fit (fixed) when I try to scroll bar, it will stay to fit.
CSS :
.dropdown
{
position: absolute;
z-index: 9999999;
display: none;
}
for more detail see my fiddle for demo here
Anyone please advice. Thanks
working jsFiddle
change like this.
.dropdown
{
position: fixed;
z-index: 9999999;
display: none;
top: 35px;
right: 6px;
}
and comment
position() in show method.
and comment
$(window).on('resize', position);