Bootstrap 4 collapse button is not visible

mmm000

I am trying to make my navigation bar responsive. When I resize my browser to test, the nav bar does collapse but the button is not visible. I tried to set the nav bar background as bg-dark but the button will still be invisible. This is my webpage: https://www.cuppela.com/cuppela/test.html .

This is my html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/popper.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>

<div id="nav-menu">
    <nav id="main-nav" class="navbar navbar-expand-md fixed-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div class="container-fluid" id="top-main"> 

    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p style="font-size: x-large;">Delicious Homemade Cakes</p>
    </div>
    
</div>

<div id="best-sellers "class="container">
    <h2>Best Sellers</h2>
    <hr>
    <div id="best-seller-cakes" class="row">
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/chocolate_cake.jpg">
            <h4>Good<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/red_velvet_cake.jpeg">
            <h4>Awesome<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/strawberry_cake.jpg">
            <h4>Great<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/cake_seven.jpg">
            <h4>Delicious<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
    </div>
</div>

</body>
</html>

This is my css:

body{
    margin: 0px;
}

li a:hover {
    background-color: #ff9900;
    border-radius: 10px;
}

li a{
    color: white !important;
}

.nav-link{
    padding: 0 0 .2rem
}

#top-main{
    background-image: url(../images/cake_six_two.jpg);
    height: 100vh;
}

#nav-menu{
    font-size: medium;
    position: relative;
}

#top_text{
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

h1{
    font-size: 500%;
    text-align: center;
}


h2{
    text-align: center;
}

#best-sellers{
    text-align: center;
}

#best-seller-cakes{
    text-align: center;
}

h4
{
    font-size: x-large;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
ge_or_gi

Resulting change - The issue is in your HTML. Add this two classes to the <nav> </nav> element in your HTML more details cna be found on the bootsrap page.

navbar-dark bg-dark

or the result will be -

 <nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">

by changing these two classes or modify their properties you can change the behavior. And don't override the bootstrap classes, add your own to override the CSS properties you need to change

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

TOP Ranking

HotTag

Archive