Navbar рушится с меньшим экраном и оставляет эффекты, расширяя его обратно

Question

У меня сложный сценарий, пожалуйста, посмотрите на скриншоты ниже.

Когда сворачивается навигационная панель на меньшем экране, и я нажимаю на кнопку, чтобы развернуться, появляется следующий экран, и он будет работать только в том случае, если я нажму на любую из вкладок (о, услугах и т. Д.), Нажмите на кнопку верхний правый значок для навигационной панели, не влияет, и выпадающее меню не возвращается.

Второй сценарий (пожалуйста, обратитесь к изображению ниже), когда я расширяю экран назад от меньшего, навигационная панель полностью испорчена. Я не знаю, что я делаю неправильно. Вот css всего моего navbar.

CSS

.navbar {
  height: 80px;
  background-color: transparent;
  border: none;
  color: white;
  z-index: 100;
  transition: background-color 1s ease 0s;
}

.navbar-default .navbar-brand {
  margin-top: 10px;
  color: white;
}
.navbar-default .navbar-brand:hover {
  color: #C57ED3;
  border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a {
  color: white !important;
  margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
  color: #C57ED3;
  border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a:visited {
  color: #C57ED3;
  text-decoration: none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  background-color: transparent;
  color: #C57ED3;
}
.navbar-default .navbar-toggle {
  border-color: #C57ED3;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #490D40;
}
.navbar-default .navbar-toggle .icon-bar {
  color: #C57ED3;
  background-color: #C57ED3;
}
.navbar-default .navbar-collapse.collapse.in ul {
  background-color: #490D40;
}

HTML

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <img src="img/logo.png" width="130px;" height="50px;" style="margin-top: 20px;">
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#abt">About</a></li>
            <li><a href="services" >Services</a></li>


            <li><div class="dropdown" >
             <button class="dropbtn">Work</button>

            <div class="dropdown-content">
    <a href="web">Web Development</a>
    <a href="students">Students</a>
    <a href="writing">Content Writing</a>
  </div>
  </div>
          </li>



            <li><a href="#contact" >Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>