Thiết kế website giá rẻ

Question

Ive am a fairly new developer and im stuck on a problem with the bootstrap navbar.

The Problem is that the collapsed navbar is not big enough when u click the “burger” icon.
At least not on screens 733px or lower.

how can i get the navbar to expand over the whole page? or at least that its big enough to host all the menu points?

thats the mistake

Heres the HTML CODE:

<!DOCTYPE html>
<html lang="de">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ABOUT US</title>
        <link rel="stylesheet" type="text/css" href="../src/css/schem1.css">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    </head>

    <body>
        <header class="container-fluid header-styling border-bottom">
            <div class="row row-header-logo">
                <div class="col-6 col-header-styling">
                    <img class="header-logo" src="../src/img/bookingLogoStackedPOSITIVE.png" alt="Logo for booking made simple" class="navbar-brand header-logo">
                </div>
                <div class="col-6 col-header-styling col-nav">
                    <nav class="navbar navbar-expand-xl navbar-light">
                        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-label="Expand Navigation">
                            <div class="navbar-toggler-icon"></div>
                        </button>
                        <div class="collapse navbar-collapse" id="nav">
                            <ul class="navbar-nav flex-row flex-xl-row">
                                <li class="nav-item">ABOS</li>
                                <li class="nav-item">KONTAKT</li>
                                <li class="nav-item">ÜBER UNS</li>
                                <li class="nav-item">
                                    <img class="header-icons" src="../src/img/accountEmoticon.png" alt="account logo" class="header-icons">
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </header>

Heres the CSS Code:

/* Root variables for consistent theme colors and fonts */
:root {
    --background-color: #f8f9fa;
    --border-color: #dee2e6;
    --text-color: #212529;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.conststyle {
    background-color: blue;
}

.rowstyle {
    background-color: yellow;
}

.colstyle {
    background-color: green;
}

/* =================================== HEADER STYLING =================================== */

.header-styling {
    height: 20vh;
}

.row-header-logo {
    height: 100%;
}

.col-header-styling {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

.header-logo {
    width: 350px;
    height: auto;
    margin-left: 10px;
}

.header-icons {
    width: 50px;
    height: auto;
}

/* === HEADER-NAVBAR === */

.col-nav {
    position: relative;
}

.navbar {
    position: absolute;
    height: 100%;
    width: 100%;
}

.navbar-toggler {
    position: absolute;
    right: 0;
}

#nav {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
}

.navbar-nav {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.nav-item {
    width: auto;
    margin: 15px;
    white-space: nowrap;
}







/* =================================== BREAKPOINTS CSS BOOTSTRAP =================================== */

/* Adjustments for cell phones */
@media (max-width: 480px) {

    .header-logo {
        position: absolute;
        left: 2%;
        width: 200px;
        height: auto;
    }

}

@media (max-width: 576px) {
}
  
@media (min-width: 481px) and (max-width: 768px) {


    /* =================== HEADER STYLING =================== */

    .header-styling {
        height: 20vh;
    }

    .col-header-styling {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        height: 100%;
    }
    
    .header-logo {
        position: absolute;
        left: 2%;
        width: 265px;
        height: auto;
    }

    .navbar-toggler{
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}
  
@media (max-width: 992px) {



    .navbar-toggler{
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 1199.98px) {


    .header-logo {
        position: absolute;
        left: 2%;
        width: 265px;
        height: auto;
    }

    .navbar-toggler{
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        width: auto;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: row;
        overflow: hidden;

    .col-nav {
        width: auto;
    }

}


/* */
 
@media (min-width: 1400px) {
}

I really appreciate your help!

Thiết kế website giá rẻ

Danh mục

Bootstrap navbar collapsed is not working properly