Strange behaviour with bootstrap nav in Joomla 3

Question

I am using bootstrap's nav in the menu (using a module called mod_bootstrapnav)

Now the issue is that when the menu is has subitems, I have to follow these steps to get the submenu to display:

1) Click on main parent item.

2) Hover off the parent item

3) Hover over the parent item again - and then only does the dropdown menu display.

Has anyone encountered this?

I am including the module code below:

<?php
/**
 * @version     1.7
 * @package     mod_bootstrapnav
 * @copyright   Copyright (C) 2014. All rights reserved.
 * @license     http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 * @author      Brad Traversy <[email protected]> - http://www.bootstrapjoomla.com
 */
//No Direct Access
defined('_JEXEC') or die;
$user = JFactory::getUser();
$name=substr($user->name, 0, strrpos($user->name, ' '));

?>
<?php if($nav_type == 'navbar') : ?>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button aria-expanded="false" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="menu-text">menu</span>
                </button>
            </div>
            <div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <?php
                    if($user->id > 0) {
                    ?>
                    <li class="dropdown">
                        <a role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><img src="images/home.png"  alt=""/> Hi <?php echo $name;?> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <?php } ?>
                    <?php foreach ($list as $i => &$item) : ?>
                        <?php
                        $class = $item->id;
                        if($item->id == $active_id){
                            //$class .= ' current';
                        }
                        if (in_array($item->id, $path)){
                            $class .= ' active';
                        }
                        ?>
                        <?php if(!$item->parent) : ?>
                            <?php if($item->level == 1) : ?>
                                <li class="<?php echo $class; ?>"><a href="<?php echo $item->flink; ?>"><?php echo $item->title; ?></a></li>
                            <?php endif; ?>
                        <?php elseif($item->parent) : ?>
                            <li class="dropdown">
                                <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><?php echo $item->title; ?> <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <?php foreach ($list as $i => &$subitem) : ?>
                                        <?php if($subitem->parent_id == $item->id) : ?>
                                            <li><a href="<?php echo $subitem->flink; ?>"><?php echo $subitem->title; ?></a></li>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                                </ul>
                            </li>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </ul>

            </div><!--/.nav-collapse -->
            <div class="languse">

                <div class="list">
                    <h5>Emergency numbers</h5>
                </div>
                <div class="clearfix"></div>
            </div>
        </div><!--Container-->
    </nav>
<?php else : ?>
    <div>
        <ul class="footer_menu list-unstyled">
        <?php foreach ($list as $i => &$item) : ?>
            <?php

            $class = 'footer_ul';
            ?>
            <li><a href="<?php echo $item->flink; ?>" class="<?php echo $class; ?>"><?php echo $item->title; ?></a></li>
        <?php endforeach; ?>
       </ul>
    </div><!-- /.list-group-->
<?php endif; ?> 

Answer 1

Solution Found:

The unwanted behavior is caused by Joomla's frontend editing capability.

When logged in as an administrator it injects code into modules to allow frontend editing. This causes unexpected behaviour. Since the menu in question is a module, (and a third-party one at that) the only solution in this case is to disable frontend editing in the configuration.

See https://www.gavick.com/documentation/joomla/templates/customization/frontend-module-editing