-1

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 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;
}

Edit: Removed webpage link as link no longer exists

mmm000
  • 89
  • 8

4 Answers4

1

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

ge_or_gi
  • 86
  • 1
  • 4
1

Add this Class navbar-dark bg-transparent

<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-transparent">
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
0

your issue is on the a css file called_transitions.scss

I have looked at your code and I found out you have a css rule that will set the navbar's display property to none when it goes below 750 width-pixels

Try looking at this file and either edit it to just compress your navbar or try removing the code

on the code, this is the part that makes your navbar not visible when scaling

.collapse {
  &:not(.show) {
    display: none;
  }
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
noxter
  • 186
  • 1
  • 11
  • Hi, is this file already included in bootstrap? I cannot seem to find the file in the bootstrap installation. – mmm000 Aug 05 '21 at 07:06
  • Hello, I found the file under a folder named SCSS under the same domain the file is called _transitions.scss – noxter Aug 05 '21 at 07:09
0

You actually apply transparent background and border css on Collapse button, this is the reason why collapse button not visible.

Goto line no 109 on _navbar.scss file and you will find below CSS.

.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
}

Just replace background-color: transparent; to background-color: white;

.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid white;
    border-radius: .25rem;
}

I hope it'll resolve your issue. Thank You

Hassan Siddiqui
  • 2,799
  • 1
  • 13
  • 22