Buonasera a tutti. Sto cercando di creare la navbar con il brand a sinistra, ed i link centrati. Però mi crea un errore quando vado ad inserire il navbar-center. In pratica quando vado su smartphone e clicco sulle tre linee, il background inserito scompare, lasciando solo le scritte...Vi inserisco il navbar ed il css:
---- NAVBAR ----
codice HTML:
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="mycontainer">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed mybutton" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nav-link" href="#" >MATRIXITALY</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse mx-auto" id="navbarNav">
<ul class="nav navbar-nav navbar-center">
<li><a href="#" class="navtext nav-link" >IMMOBILIARE</a></li>
<li><a href="#" class="navtext nav-link">ENERGIA ALTERNATIVA</a></li>
<li><a href="#" class="navtext nav-link">FINANZIAMENTI</a></li>
<li><a href="#" class="navtext nav-link">CONTATTI</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
---- css ----
codice:
body {
font-family: 'Poppins', sans-serif;
}
header .carousel-inner .item {
height: 100vh;
}
.mycontainer{
width:99%;
margin:auto;
}
.navbar-inverse {
background-color: transparent;
border-color: transparent;
padding-top:20px;
}
.navbar-inverse .navbar-brand {
color: #fff;
font-size: 30px;
font-weight: 900;
}
.nav.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.navtext{
font-size:17px;
color:white;
}
.navbar-inverse .navbar-nav>li>a {
color: #fff;
text-transform: uppercase;
}
.banner {
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
}
.carousel-caption {
padding-bottom: 20px;
font-family: poppins;
}
.carousel-caption h2 {
font-size: 30px;
text-transform: uppercase;
}
.carousel-caption h2 span {
color: #EDBB00;
}
.carousel-caption a {
background: #EDBB00;
padding: 15px 35px;
display: inline-block;
margin-top: 15px;
color: #fff;
text-transform: uppercase;
border-radius: 25px;
}
/*responsive css*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.mycontainer{
width:98%;
margin:auto;
}
}
@media only screen and (min-width: 768px) and (max-width: px) {
.carousel-caption {
padding-bottom: 80px;
}
.carousel-caption h2 {
font-size: 40px;
}
}
@media only screen and (max-width: 767px) {
.navbar-inverse .navbar-brand{
font-size: 25px;
}
.navtext{
font-size:15px;
}
.mycontainer{
width:100%;
}
.navbar-toggle{
background: rgba(0,0,0,0.5);
border:0px;
}
.navbar-collapse {
background:black;
border:0px;
text-align:center;
float:none;
}
.carousel-caption {
padding-bottom: 50px;
}
.carousel-caption h2 {
font-size: 25px;
}
.carousel-caption h3 {
font-size: 18px;
}
.carousel-caption a {
padding: 10px 25px;
}
}