Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Nav bar só funciona no Google Chrome ou diminuindo o zoom do navegador

Estou tentando utilizar nav-bar com dropdow-menu no firefox, mas ele não aparece. Já no Google Chrome funciona.

  • Aplicação PHP com Laravel
  • Utilizando Blade

Parte do código head.blade.php

<link type="text/css" href="/assets/css/styles-alternative.css" id="theme" rel="stylesheet">
<script type="text/javascript" src="/assets/js/jquery-1.10.2.min.js"></script>                              
<script type="text/javascript" src="/assets/js/jqueryui-1.10.3.min.js"></script>
<script type="text/javascript" src="/assets/js/enquire.min.js"></script>
<script type="text/javascript" src="/assets/js/application.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

Código header,blade.php

<header id="topnav" class="navbar navbar-bluegray navbar-fixed-top">
    <div class="logo-area">
        <span id="trigger-sidebar" class="toolbar-trigger toolbar-icon-bg">
            <a data-toggle="tooltips" data-placement="right" title="Ocultar menu lateral">
                <span class="icon-bg">
                    <i class="ti ti-shift-left"></i>
                </span>
            </a>
        </span>

        <span style="max-width: 177px;margin-top: 6%;">
            <a href="#" style="color: white;font-size: 20px;"><b><span class="icon-bg">CRM Ivoti</span></b></a>
        </span>
        <div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
            <div class="input-icon">
                <i class="ti ti-search search"></i>
                <input type="text" placeholder="Pesquisar..." class="form-control" tabindex="1">
                <i class="ti ti-close remove"></i>
            </div>
        </div>
    </div>
    <div class="yamm navbar-left navbar-collapse collapse in">
        <ul class="nav navbar-nav ">
            <li><a href="#"><span class="icon-bg"><i class="ti ti-home"><span> Home</span></i></span></a></li>

            <li class="dropdown" id="widget-classicmenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="icon-bg"><i class="ti ti-pencil"><span> Cadastro</span></i></span><span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/usuarios">Usuários</a></li>

                </ul>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav toolbar pull-right">
        <li class="toolbar-icon-bg hidden-xs" id="trigger-fullscreen">
            <a href="#" class="toggle-fullscreen"><span class="icon-bg"><i class="ti ti-fullscreen"></i></span></a>
        </li>
        <li class="dropdown toolbar-icon-bg">
            <a href="#" class="dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="ti ti-user"></i></span></a>
            <ul class="dropdown-menu userinfo arrow">
                <li><a href="#"><i class="ti ti-user"></i><span>Perfil</span></a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="ti ti-shift-right"></i><span>Sair</span></a></li>
            </ul>
        </li>
    </ul>
</header>

Se eu remover do head.blade.php o arquivo application.js o nav-bar é exibido, porém perco toda a responsividade da aplicação. Quem puder me ajudar, agradeço...

1 resposta
solução!

Achei um trecho do código dentro do arquivo application.js que ao excluir faz com que volte a exibir os menus novamente nos navegadores firefox e edge.

// -------------------------------
    // Auto Collapse Large Menu
    // -------------------------------
    autocollapse: function() {
        var navbar = $('header.navbar');
        var menu = $('header.navbar .navbar-collapse');

        $('body').removeClass('topnav-collapsed');
        $('#topnav .navbar-left').addClass('in');
        $('#navbar-links-toggle').parent('li').hide();
        $(menu).insertAfter('header.navbar .logo-area');


        if((navbar.innerHeight() > headerHeight) || ($(window).innerWidth()<786)) {// check if we've got 2 lines Or less than 786px


//            $('body').addClass('topnav-collapsed'); Tive que comentar esta linha para funcionar a responsividade nos navegadores Firefox e Edge
            $('#topnav .navbar-left').removeClass('in');
            $('#navbar-links-toggle').parent('li').show();

            navbar.append(menu.detach());
        }
    }

Percebi que tinha alguma coisa vinculada a responsividade, pois quando diminuia o zoom nos navegadores com problema, os menus superiores eram exibidos.

Se alguém puder me esclarecer essa questão me ajudaria muito.