CODEWITHSUNDEEP
htmlcssbootstrap-4togglenavbar
Samyak Vermani
Samyak Vermani

Reputation: 61

Navbar expands and suddenly collapses

So, when I click my hamburger icon it changes to the close icon. Also my navbar expands for a fraction of a second but it collapses back. The same thing happens when I hit the close button afterwards the nav items become visible for a fraction of a second. I have added my CSS as well for mobile widths I am not able to figure it out any help?

HTML

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.google.com/specimen/Be+Vietnam" )>
  <link rel="stylesheet" href="style.css">

  <title>Frontend Mentor | Manage landing page</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>


  <nav class="navbar navbar-inverse navbar-expand-lg navbar-light">
    <!-- <div class="navbar-header"> -->
    <div class="logo">
      <a class="navbar-brand image-responsive" href="#">
        <img src="images/logo.svg" />
      </a>
    </div>
    <!-- <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText">
      <img src="images/icon-hamburger.svg" alt="hamburger" class="hamburger" />
      <img src="../manage-landing-page-master/images/icon-close.svg" alt="clse" class="close"/>
    </button> -->
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse"
      data-target="#navbarText" aria-controls="navbarsExampleDefault" aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="my-1 mx-2 close"><img src="../manage-landing-page-master/images/icon-close.svg" /></span>
      <span class="navbar-toggler-icon"><img src="../manage-landing-page-master/images/icon-hamburger.svg" /></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto text-center">
        <li class="nav-item">
          <a class="nav-link" href="#"></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Careers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Community</a>
        </li>
      </ul>
      <button class=" nav-button get-started">Get Started</button>
    </div>
  </nav>

CSS max width 376px

 @media (max-width:376px){

    .navbar{
        position: fixed;
        display:flex;
        position: relative;
        justify-content:space-between;
        padding-top: 2vw;
        box-sizing: border-box;      
        width:100%;
        }
    .navbar-nav{
        display:flex;
        list-style:none; 
    }
    .navbar-toggler>.close {
        display:inline;
    }
    .navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
        display:none;
    }
    
    .nav-item{
        width: 2px;
        color: black;
        text-align: center;
        font-family: "Be Vietnam",sans-serif;
        font-weight: 400;
        font-style: bold;
    }
    .nav-link{
        text-align: center;
        display:block;
        color: black;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        text-decoration: none;
        
        
    }
    .navbar-brand{
        display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap;
        color: #f5f5f5;
        margin-left:1rem;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        text-decoration:none;
        max-width: 100%;
        max-height:2px;
    }
 .navbar-toggler{
        border: none;
    }
    body{
        background-image: url("../manage-landing-page-master/images/bg-tablet-pattern.svg");
        background-repeat: space;
     background-position:57vw;
    }
    .w-50{
        width: 50%;
    }
    .container-fluid{
        margin-top: 1vw;
    }
    .row{
        width: 100%;
    }
    .top1{
        padding-bottom: 14vw;
        text-align: center;
        margin: 3.5vw;
    }
   
    .bring{
        font-size: 10vw;
    }
.tablee{
    width: 95vw;
    margin-left: -3.5vw;
}

    .manage{
        width: max-content;
    }
    .get-started{
        align-self: center;
        border-radius: 10vw;
        background-color: rgb(243,96,60);
        border: none;
        color: blanchedalmond;
        /* min-width: 30vw; */
        height: 5.3vh;
        font-size: 3vw;
        /* align-content: flex; */
        display: inline-block;
        padding-inline-start: 7vw;
        padding-inline-end: 7vw;
        /* margin-left:0vw; */
        -webkit-box-shadow: 0 8px 6px -6px rgb(243,96,60);
           -moz-box-shadow: 0 8px 6px -6px rgb(243,96,60);
                box-shadow: 0 8px 6px -6px rgb(243,96,60);
    }

Upvotes: 0

Views: 432

Answers (1)

Re9iNee
Re9iNee

Reputation: 620

Add:

.navbar-collapse.collapse.in {
    display: block !important;
  }

to Your CSS.

edit: @timhc22 had the same problem and it solved:

https://stackoverflow.com/a/20249415/9745726

Upvotes: 1

Related Questions