Bootstrap 4.2.1 - Collected Navbar does not fill the entire width of the screen

Question

Bootstrap 4.2.1 - Collected Navbar does not fill the entire width of the screen

Asked 5 years, 10 months ago

Viewed 227 times

1

Basically my problem is that when I have mine navbar collected, the list items do not fill the entire width of the screen. I tried many things, but I cannot find the solution.

Code

 /*
  **********************************************************
  * OPAQUE NAVBAR SCRIPT
  **********************************************************
  */

  // Toggle tranparent navbar when the user scrolls the page

  $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.opaque-navbar').addClass('opaque');
    } else {
        $('.opaque-navbar').removeClass('opaque');
    }
});

.jumbotron {
  color: white;
  background-image: url("https://mdbootstrap.com/img/Photos/Others/img (40).jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 90vh;
}

/* .jumbotron .container h1{
  margin-top: 100px;
} */ 


 

/***********************************************************************
*  OPAQUE NAVBAR SECTION
***********************************************************************/

.opaque-navbar {
    background-color: transparent;
    /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
    height: 60px;
    padding: 5px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
    border-bottom: 0px;
    transition: background-color .5s ease 0s, padding 0.5s, height 0.5s;
}

li a{
  color: rgb(255, 255, 255)!important;
  /* background-color: transparent!important; */
  transition: color .1s ease 0s;
}

li a:hover{
  color: rgb(192, 192, 192)!important;
}

.active > a {
  color: white!important;
  background-color: rgba(255, 255, 255, 0.096)!important;  
} 

.opaque-navbar.opaque {
    background-color: rgb(48, 48, 48);
    height: 50px;
    padding: 0px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
    border-bottom: 0px;
    transition: background-color .5s ease 0s, padding 0.5s, height 0.5s;
}

ul .dropdown-menu {
    background-color: rgb(255, 255, 255);
}

ul .dropdown-menu > a {
  color: black!important;
}

.opaque-navbar.opaque .dropdown-menu{
  margin-top: 4px;
  transition: margin-top 0.5s;
}



.opaque-navbar .dropdown-menu{
  margin-top: 9px;
  transition: margin-top 0.5s;
}


.navbar-inverse .navbar-toggle,
.navbar-inverse .nav .open>a,
.navbar-inverse .nav .open>a:hover,
.navbar-inverse .nav .open>a:focus {
   background-color:rgba(255, 255, 255, 0.096);
   color:white!important;
}
 


@media (max-width: 767px) {

  body{
    background:rgb(255, 255, 255);
  }

  .opaque-navbar {
    background-color: transparent;
    height: 50px!important;
    padding: 0px;
    transition: background-color .5s ease 0s;
  }

  .opaque-navbar.opaque {
    background-color: rgb(48, 48, 48);
    height: 50px!important;
    transition: background-color .5s ease 0s;
  }
  .opaque-navbar .container .navbar-collapse{
    background-color: rgb(48, 48, 48);
    margin-top:0px!important;
    text-align: left!important;
    width:100vw!important;
  }  
  .opaque-navbar.opaque .container .navbar-collapse{
    background-color: rgb(48, 48, 48);
    text-align: left!important;
    width:100vw!important;
  }  
 
  .opaque-navbar .container .navbar-collapse .navbar-nav .dropdown div.dropdown-menu{
    margin-top: 0px;
    background-color: rgb(48, 48, 48);
  }
  .opaque-navbar .container .navbar-collapse .navbar-nav .dropdown div.dropdown-menu .dropdown-item{
    color: white!important;
  }
  .opaque-navbar .container .navbar-collapse .navbar-nav{
    float: none!important;

  }

  .dropdown-menu > a {
    color: rgb(255, 255, 255)!important;
    text-align: left;
    padding-left: 15px;
  }
}

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Videojogos</title>
        <link rel="icon" href="img/logo.png" type="image/x-icon">
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>   -->
        <link rel="stylesheet" href="css/style1.css">

    </head>

    <body>

        <!--
        ********************************************************************
        * Responsive Transparent Navbar
        ********************************************************************
        -->
        <nav class="navbar navbar-inverse navbar-dark navbar-expand-md fixed-top opaque-navbar">
            <div class="container">

                <a href="index.html" class="navbar-left" style="width: 250px; height: 50px;"><img src="img/logoText_white.png" style="width: 250px; height: 50px;" onmouseover="this.src='img/logoText.png'" onmouseout="this.src='img/logoText_white.png'"href="#"></a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navMain">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
                <div class="collapse navbar-collapse" id="navMain">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
                        <li class="nav-item dropdown" style="list-style-type: none;">
                            <a class="nav-link dropdown-toggle" href="#" id="navDropdown" data-toggle="dropdown">
                                Visão Geral (?)
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">O que são?</a>
                                <a class="dropdown-item" href="#">Estilos</a>
                                <a class="dropdown-item" href="#">Plataformas</a>
                            </div>
                        </li> 

                        <li class="nav-item dropdown" style="list-style-type: none;">
                            <a class="nav-link dropdown-toggle" href="#" id="navDropdown1" data-toggle="dropdown">
                                Esports
                            </a>
                            <div class="dropdown-menu" >
                                <a class="dropdown-item" href="#">O que são?</a>
                                <a class="dropdown-item" href="#">História</a>
                                <a class="dropdown-item" href="#">Organizações</a>
                                <a class="dropdown-item" href="#">Torneios</a>
                            </div>
                        </li> 
                        
                    </ul>
                </div> 
            </div>
        </nav>
        <!-- ************************** END OF NAV ************************** -->
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-4">Transparent Background Example</h1>
            </div>
        </div>


        <div class="container" style="min-height:1000px">
            <div class="row" >
                <div class="col-md-12">
                    <h2>Page Content</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="col-md-12">
                        <div class="card" style="width: 18rem;">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                              <h5 class="card-title">Card title</h5>
                              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                              <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                          </div>
                    </div>

                    <div class="col-md-12">
                        a
                        <span class="navbar-toggler-icon" style="color:black"></span>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="col-md-12">
                        b
                    </div>

                    <div class="col-md-12">
                      c  
                    </div>
                </div>
            </div>
        </div>

        <script src="js/index.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </body>

</html>

https://codepen.io/MiguelTF/project/editor/XoLPno

@Lipespry haha hadn’t even noticed!

– Miguel Ferreira

2019/01/10 at 00:20
The problem is the . container that creates automatic max-width less than the width of the screen.

– Sam

2019/01/10 at 02:31
Your main problem even is that you put a div with the class .container Inside the Navbar this is not correct according to the documentation! https://getbootstrap.com/docs/4.0/components/navbar/ take advantage of the fact that it’s starting and of a revised HTML structure and how you’re building the CSS, always try to follow the official documentation, you’ll avoid this kind of problem, And remember that Bootstrao already has CSS styles for various class names like .container, so if you’re going to use generic names, go for .container-site-x for example, this will avoid class name conflicts in css

– hugocsl

2019/01/10 at 11:05

No answers

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.