Bootstrap resize collapse navbar

Question

I'm writing my Diploma where I have to programm a Webpage for a Company using Bootstrap. My actuall problem is that when my navbar collaps the colored container behind my nav-items just ends where the word ends. Like This:

enter image description here

I'm really not the best programmer so i just can show you guys my php and my css code. It finally should look like this:

enter image description here

So it should have the same width as the window. But just in the collapsed view.

.navbar-collapse{
    background-color: #62615F;

}

.nav-item{
    background-color: #62615F;
}

.nav-item:hover{
    background-color: lightgray;
}

.active{
    color: white;
}

.active:hover{
    color: black;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

<header>
  <nav class="navbar navbar-expand-xxl fixed-top text-large">
    <div class="container-fluid">
    <div class="d-flex align-items-start">
      <a class="navbar-brand" href="../Startseite/Bootstrap2.php"><img src="Firmenlogo.png" id="logo" alt="Logo" class="responsive-img" width="300"></a>
    </div>
    <div class="float-right">
      <button class="navbar-toggler navbar-dark pull-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav">
                <?php
                    if(isset($_SESSION["berechtigung"])){
                        ?>
                            
                            <li class="nav-item">
                                <a class="nav-link active" id="bearbeiten" aria-current="page" href="../Admin/Bearbeiten.php">Bearbeiten</a>
                            </li>
                            
                        <?php
                    }
                ?>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="../Startseite/Bootstrap2.php">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="../Unternehmen/Unternehmen.php">Unternehmen</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="../Links/Links.php">Links</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="../Impressum/Impressum.php">Impressum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="true" href="../AGB/AGB.php">AGB</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="../Kontakt/Kontakt.php">Kontakt</a>
                </li>
                <li class="nav-item">
                    <?php
                        if($angemeldet) {   ?>
                            <a class="nav-link active" href="../Login/Login.php" id="eingeloggt">
                                <?php
                                    echo $_SESSION["name"];
                                ?>
                            </a>
                        <?php   
                        }else{
                            ?>
                    
                            <a class="nav-link active" href="../Login/Login.php" id="login"></a>
                        
                        <?php   }   ?>
                </li>
            </ul>
        </div>
    </div>
   </div>
  </nav>
</header>

Brandon Kauffman · Answer 1 · 2021-04-07T20:40:59.763

0

Try adding this to your CSS:

#navbarCollapse {
    width: 100%;
    position: fixed;
}

This takes the navbarCollapse ID and stretches it to 100% of the screen

edited Apr 07 '21 at 20:40

answered Apr 07 '21 at 18:14

Brandon Kauffman

1,515
1
7
33

Thanks a lot for the quick response. But the command don't change anything :( any ideas how i can search for the problem? – EliasKreuter Apr 07 '21 at 20:25
It's probably being overwritten by other bootstrap classes. If you right click the the navbar, and inspect it, you'll see the active css on the right. Some things to keep an eye out for are position, width, max-width, and display snippets. You may also want to google some of the active css to find out what needs to be changed to get the styles you want – Brandon Kauffman Apr 07 '21 at 20:34
Okay I will take a look. Thank you very much! – EliasKreuter Apr 07 '21 at 20:36
Also I updated my answer. From a little more research, that might force the element to stay 100% of the page width – Brandon Kauffman Apr 07 '21 at 20:41

Bootstrap resize collapse navbar

1 Answers1