Bootstrap NavBar e collapse

[Timely]

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 ----

<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 ----

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;
    }
}