Styling error of bootstrap navigation

Question

I'm using a bootstrap template which was created by respondcms. Everything look fine on desktops, but on mobile devices the collapsed navigation is not accessible. The entries within the dropdown are not clickable.

I already tried a lot of settings, but everything looks quite similar to the example on http://getbootstrap.com/examples/theme/

Does anyone have a clue for me? The site is accessible on http://cms.h2516034.stratoserver.net/sites/zbv/index

Thanks in advance

Raman

Answer 1

It seems your problem has to do with z-index or something. You can test in your menu point "Aktivitäten". Scale your Browser small and you will see, that the entries under the "Kontakt" entry are accessible. Maybe a rendering problem from the CMS you use?

Possible solution: (not tested global)

body .navbar ul.dropdown-menu li, body .navbar ul.dropdown-menu li a {
height: 30px !important;
line-height: 30px !important;
position: relative;
z-index: 100000;
}

respond.min.css

Answer 2

@Raman try this. It should work

<style>
@media(max-width:767px){
    body .navbar li {
        height: auto;
        line-height: 65px;
    }
}
</style>