当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - 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:

网友答案:

Give .navbar-fixed-top to z-index:99999; will make arrow in visible when menu open.

.navbar-fixed-top{
   z-index:99999;
}
网友答案:

To resolve this, change the z-index of the arrows like so :

.bx-wrapper .bx-controls-direction a{z-index:100};
网友答案:

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;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: