1

What I'm trying to do is make on my own a webpage with bootstrap. I want to, instead of a navbar-toggler, put a dropdown. I am not fully familiar with JS yet. For this reason, I wanted to do it with only bootstrap. I put a @media to change the #TheNav display to none at certain screen width. At the same time the opposite with the dropdown. The problem is that the dropdown doesn't work, I've been trying different things but nothing. So what I've done is to copy a predetermined bootstrap dropdown and put it below everything, and still doesn't work!! I revised having all bootstrap links in order and position,...

THIS IS THE HTML DOCUMENT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/Tabler/logo.png">
    <!-- bootstrap head link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="tabler.css" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <title >tabler</title>
</head>
<body>

        <nav class="navbar navbar-light bg-light">
            <div class="container-fluid">
                <a href="#" class="text-decoration-none navbar-brand ms-5 ps-5 mt-0 pt-0">
                    <div class="d-flex justify-content-center">
                        <img src="/Tabler/logo.png" style="width: 25px; height: 25px;">
                        <span class="mx-2 text-dark fw-bold" style="font-family: 'Nunito', sans-serif;">
                            tabler
                        </span>
                    </div>
                </a>
                <div class="me-5 pe-5" id="TheNav">
                    <div>
                        <a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Demo</a>
                    </div>

                    <div>
                        <a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Source Email</a>
                    </div>

                    <div>
                        <a class="nav-link px-2" href="#" style="font-size: 11px; font-weight: 420;">Tabler Email</a>
                    </div>
                </div>
            </div>
        </nav>



        <div class="container-fluid">
            <div class="row" id="Jumbo">
                <div class="col-lg-6 text-center">
                    
                    <h1 class="text-white mt-5">Admin panel made simple. For Free!</h1>
                    <p class="subHed text-white my-4">Premium and Open Source dashboard template with responsive and high quality UI.</p>
                    
                    <div class="mb-5">
                        <button class="text-white downloadBut btn me-1">
                        Download
                        </button>
                        <button class="text-dark bg-white text-bold btn ms-1" id="demoBtn">
                        Browse Demo
                        </button>
                    </div>
                    

                </div>
                <div class="col-lg-6">

                </div>
            </div>

        </div>


        
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    

        <!-- bootstrap body links -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>

AND THIS IS THE CSS

.downloadBut {
    background-color: rgb(38, 187, 71);
}
#Jumbo {
    background-color: rgb(27, 150, 231);
    
}
.btn {
    border: none;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 2%;
}    
.subHed {
    font-size: 16px;
    font-weight: 450;
    opacity: .8;
}
h1 {
    font-size: 22px;
}
#demoBtn {
    color: rgb(180, 177, 177);
}
.nav-link {
    color: rgb(83, 82, 82);
}
@media screen and (max-width: 580px) {
    #TheNav {
        display: none;
    }
}
@media screen and (min-width: 581px) {
    #TheNav {
        display: flex;
    }
}
@media screen and (min-width: 581px) {
    .dropD {
        display: none;
    }
}
  • Use only `bootstrap.bundle.min.js`, OR both `popper.min.js` AND `bootstrap.min.js` NOT all three. https://getbootstrap.com/docs/5.1/getting-started/introduction/#js – Arleigh Hix Oct 01 '21 at 12:35
  • OMG with bootstrap.bundle.min.js alone AND bootstrap.bundle.min.js with popper.min.js works, but the three of them not. Whyy???? @ArleighHix –  Oct 01 '21 at 13:03
  • Thanks a lot, I've been searching all forums and nowhere finding this. This can affect other things (not using the third one)?? –  Oct 01 '21 at 13:05

0 Answers0