0

I have got a really big problem and I can't find an answer for it. Here is the problem:

I work on a website created with drupal 7 and the twitter bootstrap dropdown menu. The menu works very well in my browser (Chrome and Firefox) and on a Windows and Android Phone. But when I check the menu on a Blackberry or an iPhone the dropdown menu gets hide by the content.

I searched a long time for the solution and tested a lot of different solutions (like these)but nothing worked.

Here you can the a screenshot of the problem: https://i.stack.imgur.com/mUsxA.jpg

<header id="header" class="header" role="header">

    <div class="container">
        ::before
        <nav class="navbar navbar-default" role="navigation">
            ::before
            <!--

             Brand and toggle get grouped for better mobile di…

            -->
            <div class="navbar-header">
                ::before
                <button class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse" type="button"></button>

    <a id="logo" class="navbar-brand" href="/"></a>
    ::after

</div>
<!--

 /.navbar-header 

-->

<!--

 Collect the nav links, forms, and other content f…

-->

<div id="navbar-collapse" class="navbar-collapse collapse in" style="">

    ::before
    <ul id="main-menu" class="menu nav navbar-nav">
        ::before
        <li class="first leaf menu-link-radwanderwege"></li>
        <li class="expanded dropdown menu-link-unterkünfte radix-dropdown-processed">

    <span class="dropdown-toggle nolink" data-target="#" data-toggle="dropdown" title=""></span>

    <ul class="dropdown-menu">
        <li class="first leaf menu-link-aktuelle-news"></li>
        <li class="last leaf menu-link-hotels"></li>
    </ul>
    ::after

</li>
<li class="expanded dropdown menu-link-mobilität radix-dropdown-processed"></li>

<li class="expanded dropdown menu-link-touristeninformationen radix-dropdown-processed open"></li>

<li class="expanded dropdown menu-link-reisen radix-dropdown-processed"></li>

<li class="last expanded dropdown menu-link-e-autos-und-fahrräder radix-dropdown-processed"></li>

                    ::after
                </ul>
                ::after
            </div>
            <!--

             /.navbar-collapse 

            -->
            ::after
        </nav>
        <!--

         /.navbar 

        -->
        ::after
    </div>
    <!--

     /.container 

    -->

</header>
<div id="main-wrapper">

    <div id="main" class="main">
        <div class="container"></div>
        <div id="content" class="container">
            ::before
            <div class="region region-content">
                <div id="block-easy-breadcrumb-easy-breadcrumb" class="block block-easy-breadcrumb"></div>
                <div id="block-system-main" class="block block-system">
                    <div class="content">
                        <div class="panel-display panel-1col clearfix">
                            ::before
                            <div class="panel-panel panel-col">
                                <div>
                                    <div class="panel-pane pane-node">
                                        <div class="pane-content">
                                            <div class="ds-1col node node-suchmaske node-promoted node-teaser view-mode-teaser clearfix" typeof="sioc:Item foaf:Document" about="/node/14663"></div>
Community
  • 1
  • 1
KieBar
  • 1

1 Answers1

0

Just add this to the end of your css:

#main-menu {
    z-index:999999;
}
AndrewL64
  • 15,794
  • 8
  • 47
  • 79
  • If this is indeed the solution, do you need to set such a high number? It's best not to go so insanely high if you can avoid it. – klidifia Mar 06 '15 at 03:15
  • https://bugs.webkit.org/show_bug.cgi?id=61824 https://bugs.webkit.org/show_bug.cgi?id=138162 This could be the bug bu I don't know how to fix it. – KieBar Mar 06 '15 at 11:53