Menu items unresponsive - bootstrap

Question

This is my menu being echoed from a php function. The last two items are unresponsive and certain ones work on certain pages and others don't. Really confused. Appreciate the help.

<!--Menu-->
    <div class= "navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">

                <a class= "btn btn-navbar" data-toggle= "collapse" data-target= ".nav-collapse">
                    <i class="icon-tasks"></i>
                </a> 
                <a href = "#" class = "brand">P.R.I.S.M.</a>

                    <div class= "nav-collapse collapse">
                        <ul class= "nav pull-left">
                            <li class = "active"><a href="TLHome.php">Home</a></li>
                            <li class="dropdown">
            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Hours<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="NormalEval.php">View Own Hours</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="TLEval.php">Record Own Hours</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="TLEval.php">Record Employee Hours</a></li>
                                </ul>
                                </li>
                            <li class="dropdown">
            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Evaluations<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="NormalEval.php">Employee Evaluation</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="TLEval.php">Team Leader Evaluation</a></li>
                                </ul>
                                </li>
                            <li><a href="TLSettings.php" >Confirm Hours</a></li>
                            <li><a href="TLSettings.php" >Team Settings</a></li>
                            <li><a href="login.html" >Logout</a></li>

                        </ul>
                    </div>

            </div>
        </div>
    </div>

score 0 · Answer 1 · answered Aug 19 '14 at 17:18

0

The problem ended up being that I had modal in place on that page and it would disable the menu whenever it was hidden.

answered Aug 19 '14 at 17:18

PT_C

1,178
5
24
57

score -1 · Accepted Answer · answered Mar 30 '14 at 18:13

I think it depends on outer content, can you post more code?. This is the fiddle that I have created. http://jsfiddle.net/jzLC7/

<div class= "navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">

                <a class= "btn btn-navbar" data-toggle= "collapse" data-target= ".nav-collapse">
                    <i class="icon-tasks"></i>
                </a> 
                <a href = "#" class = "brand">P.R.I.S.M.</a>

                    <div class= "nav-collapse collapse">
                        <ul class= "nav pull-left">
                            <li class = "active"><a href="TLHome.php">Home</a></li>
                            <li class="dropdown">
            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Hours<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="NormalEval.php">View Own Hours</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="TLEval.php">Record Own Hours</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="TLEval.php">Record Employee Hours</a></li>
                                </ul>
                                </li>
                            <li class="dropdown">
            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Evaluations<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="NormalEval.php">Employee Evaluation</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="TLEval.php">Team Leader Evaluation</a></li>
                                </ul>
                                </li>
                            <li><a href="TLSettings.php" >Confirm Hours</a></li>
                            <li><a href="TLSettings.php" >Team Settings</a></li>
                            <li><a href="login.html" >Logout</a></li>

                        </ul>
                    </div>

            </div>
        </div>
    </div>

view-source:http://oraserv.cs.siena.edu/~perm_quantum_tech/Prototypes/TLHome.php# — PT_C, Mar 31 '14 at 14:32
I think that your problem is z-index http://stackoverflow.com/questions/16149701/bootstrap-dropdowns-menus-appearing-behind-other-elements-ie7 — , Mar 31 '14 at 18:46

Menu items unresponsive - bootstrap

2 Answers2