1

Meu site está com um bug que não sei quando começou, estava funcionando normalmente, quando o clicava no menu hambúrguer o menu descia com as opções com um fundo branco e abaixo na nav, porem agora ele está abrindo por cima da nav oque faz ele ficar cortado em cima, e com o fundo transparente assim:

inserir a descrição da imagem aqui

Meu html atual:

<nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">
    <div class="container">
        <a class="navbar-brand" href="/">
            <img src="../imgs/logocompleto.png">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="../cursos/">Cursos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../unidades/">Unidades</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../testeseuingles/">Teste seu Inglês</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../franquia" target="_blank">Seja um Franqueado</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " data-toggle="modal" id="btncomeceagoraresponsive"
                       data-target="#ModalSaibaMais">Começe agora</a>
                </li>
            </ul>
            <button type="button" data-toggle="modal" id="btncomeceagora" data-target="#ModalSaibaMais">Começe agora
            </button>
        </div>
    </div>
</nav>

Meu Css responsivo:

@media only screen and (max-width: 768px) {
    .navbar-nav{
        display: flex;
    }
    .nav-item{
        border-radius: 5px;
        background-color: #dfe6e9;
        margin-top: 4px;
        color: #15254B;
    }
    #btncomeceagora{
        display: none;
    }
    #btncomeceagoraresponsive{
        display: block;
    }
    .footer{
        padding: 0.3rem;
    }
    .footer .container{
        text-align: center;
    }
    .footer .container .row div {
        margin-top: 0.5rem;
        /*background-color: #ffc107;*/
        display: inline-block;
    }
    .encontreundiade{
        width: auto !important;
        position: static !important;
        border: 0;
        margin-top: 0 !important;
        margin-left: 0 !important;
        box-shadow: 0 0 0 0 !important;

    }

    #gmap{
        width:100%;
        height:57vh !important;
    }
    .ocultarresponsive{
        display: none;
    }
    .row h6{
        font-size: 0.9rem;
    }
    .footer{
        position: relative;

    }
}

Meu css padrão

.navbar {
    height: 4rem;
    -webkit-box-shadow: 0 8px 3px -0px #999;
    -moz-box-shadow: 0 0px 3px 0px #999;
    box-shadow: 0 0px 3px 0px #999;
}
/*Costumização Menu*/

.nav-link{
    margin-right: 8px;
    margin-left: 8px;
    transition: color .2s ease-in-out;
}
.nav-link:hover {
    /*color: #15254B !important;*/
    color: #A71E23 !important;
}
.nav-item .active{
    color: #15254B !important;
}
/*Centralizar Menu horizontalmente*/
.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}
.navbar-nav > li {
    display: inline-block;
    float:none;

}
#btncomeceagora
{
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 15px;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    margin: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    background-color: #A71E23;
    color: #f8f9fa;
    position: relative;
    display: inline-block;
    transition: background .2s ease-in-out;

}
#btncomeceagora:hover
{
    background-color: #15254B;

}
4
  • Cara aqui ele está abrindo normal. Provavelmente é algo que vc fez em um CSS a parte que não o original do BS4. Sugiro vc editar a sua pergunta com o seu CSS completo! Do jeito que está não tem como te responder de forma precisa.
    – hugocsl
    15/03/2018 às 13:08
  • @hugocsl coloquei o css do responsivo 15/03/2018 às 13:12
  • A resposta abaixo não resolveu?
    – Meu ovo
    20/03/2018 às 20:59
  • Acabei de editar a resposta com uma opção que talvez seja melhor, até pq se o seu @media é 768px, vc deveria usar navbar-expand-md na .navbar e não -sm, veja mais detalhes na resposta.
    – hugocsl
    20/03/2018 às 21:12

1 Resposta 1

1
+50

Opção 1

Igor eu consegui resolver o "Bug" mudando o tipo do display e colocando uma altura auto na .navbar quando o Menu está responsivo.

Primeiro como vc está construindo o sei estilo dentro do @media only screen and (max-width: 768px) vc deveria usar esse estilo na .navbar navbar-expand-md e não o que vc colocou de navbar-expand-sm a não ser que vc construa seu estilo dentro do @media only screen and (max-width: 576px)

Agora para corrigir a .navbar basta usar essas classes.

@media only screen and (max-width: 768px) {
    .navbar {
        display: block;
        height: auto;
    }
}

Veja como ficou o exemplo com essa opção:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name=
 content=
>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
        
.navbar {
    height: 4rem;
    -webkit-box-shadow: 0 8px 3px -0px #999;
    -moz-box-shadow: 0 0px 3px 0px #999;
    box-shadow: 0 0px 3px 0px #999;
}
/*Costumização Menu*/

.nav-link{
    margin-right: 8px;
    margin-left: 8px;
    transition: color .2s ease-in-out;
}
.nav-link:hover {
    /*color: #15254B !important;*/
    color: #A71E23 !important;
}
.nav-item .active{
    color: #15254B !important;
}
/*Centralizar Menu horizontalmente*/
.navbar-nav {
    
    margin:0 auto;
    display: block;
    text-align: center;
}
.navbar-nav > li {
    display: inline-block;
    

}
#btncomeceagora
{
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 15px;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    margin: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    background-color: #A71E23;
    color: #f8f9fa;
    position: relative;
    display: inline-block;
    transition: background .2s ease-in-out;

}
#btncomeceagora:hover
{
    background-color: #15254B;

}

@media only screen and (max-width: 768px) {

.navbar {
    display: block;
    height: auto;
}
.navbar::after {
    content: "";
    display: table;
    clear: both;
}

    .navbar-nav{
        display: flex;
    }
    .nav-item{
        border-radius: 5px;
        background-color: #dfe6e9;
        margin-top: 4px;
        color: #15254B;
    }
    #btncomeceagora{
        display: none;
    }
    #btncomeceagoraresponsive{
        display: block;
    }
    .footer{
        padding: 0.3rem;
    }
    .footer .container{
        text-align: center;
    }
    .footer .container .row div {
        margin-top: 0.5rem;
        /*background-color: #ffc107;*/
        display: inline-block;
    }
    .encontreundiade{
        width: auto !important;
        position: static !important;
        border: 0;
        margin-top: 0 !important;
        margin-left: 0 !important;
        box-shadow: 0 0 0 0 !important;

    }

    #gmap{
        width:100%;
        height:57vh !important;
    }
    .ocultarresponsive{
        display: none;
    }
    .row h6{
        font-size: 0.9rem;
    }
    .footer{
        position: relative;

    }
}
</style>
</head>
<body>
    
    <nav class="navbar navbar-expand-md bg-light navbar-light sticky-top">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img src="../imgs/logocompleto.png">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="../cursos/">Cursos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../unidades/">Unidades</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../testeseuingles/">Teste seu Inglês</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../franquia" target="_blank">Seja um Franqueado</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " data-toggle="modal" id="btncomeceagoraresponsive"
                           data-target="#ModalSaibaMais">Começe agora</a>
                    </li>
                </ul>
                <button type="button" data-toggle="modal" id="btncomeceagora" data-target="#ModalSaibaMais">Começe agora
                </button>
            </div>
        </div>
    </nav>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>


Opção 2 (a primeira é a mais adequada ao meu ver)

Como vc não colocou o seu breacking point eu usei um tamanho oficial do Bootstrap 4 @media (max-width: 576px) mas aqui vc pode consultar os tamanho oficiais https://getbootstrap.com/docs/4.0/layout/overview/ (dependendo do valor que vc usar aqui vc vai ter que ajustar seu CSS)

Segue o modelo com o problema resolvido. (para visualizar a tela tem que ter menos de 576px de largura)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name=
 content=
>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>



.navbar {
    height: 4rem;
    -webkit-box-shadow: 0 8px 3px -0px #999;
    -moz-box-shadow: 0 0px 3px 0px #999;
    box-shadow: 0 0px 3px 0px #999;
}
/*Costumização Menu*/

.nav-link{
    margin-right: 8px;
    margin-left: 8px;
    transition: color .2s ease-in-out;
}
.nav-link:hover {
    /*color: #15254B !important;*/
    color: #A71E23 !important;
}
.nav-item .active{
    color: #15254B !important;
}
/*Centralizar Menu horizontalmente*/
.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}
.navbar-nav > li {
    display: inline-block;
    float:none;

}
#btncomeceagora
{
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 15px;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    margin: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    background-color: #A71E23;
    color: #f8f9fa;
    position: relative;
    display: inline-block;
    transition: background .2s ease-in-out;

}
#btncomeceagora:hover
{
    background-color: #15254B;

}
#btncomeceagoraresponsive{
    display: none;
}
/* logo  */

.navbar-brand img{
    width:auto;
    height:2rem;
}

@media (max-width: 576px) {
     /* debbug da Navbar  */
    .navbar{
        display: table;
        width: 100%;
    }
    .navbar-nav {
        display: flex;
    }
    .nav-item{
        border-radius: 5px;
        background-color: #dfe6e9;
        margin-top: 4px;
        color: #15254B;
    }
    #btncomeceagora{
        display: none;
    }
    #btncomeceagoraresponsive{
        display: block;
    }
}

</style>
</head>
<body>
    
<!-- Navigation -->
<nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">
    <div class="container">
        <a class="navbar-brand" href="/">
            <img src="../imgs/logocompleto.png">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../cursos/">Cursos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../unidades/">Unidades</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../testeseuingles/">Teste seu Inglês</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../franquia" target="_blank">Seja um Franqueado</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../contato/">Contato</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " data-toggle="modal"  id="btncomeceagoraresponsive" data-target="#ModalSaibaMais">Começe agora</a>
                </li>
            </ul>
            <button type="button" data-toggle="modal" id="btncomeceagora" data-target="#ModalSaibaMais">Começe agora</button>
        </div>
    </div>
</nav>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .