Option 1
Igor was able to resolve the "Bug" by changing the type of display and setting auto height to .navbar when the Menu is responsive.
First of all, how do you build your style within @media only screen and (max-width: 768px) you should use this style in .navbar navbar-expand- md and not what you put in navbar-expand- sm unless you build your style within @media only screen and (max-width: 576px)
Now to fix the .navbar just use these classes.
@media only screen and (max-width: 768px) {
.navbar {
display: block;
height: auto;
}
}
See the example with this option:
<!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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Option 2 (the first one is the most appropriate for me)
As you did not put your breacking point I used an official Bootstrap size 4% with% but here you can check the official sizes #
Follow the template with the issue resolved (to view the screen must be less than% width%) p>
<!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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
