Visualizzazione dei risultati da 1 a 1 su 1

Hybrid View

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2019
    Messaggi
    4

    Bootstrap NavBar e collapse

    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;
        }
    }
    Ultima modifica di KillerWorm; 20-01-2021 a 22:11 Motivo: inseriti tag code

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.