导航栏在较小的屏幕上折叠并留下影响，将其向后扩展

Question

我的情况很复杂，请查看以下屏幕截图。

当导航栏在较小的屏幕上折叠时，我单击按钮以展开，出现以下屏幕，并且仅当我单击任何选项卡（关于，服务等）时，该屏幕才会显示导航栏的右上角图标，不会受影响，并且下拉菜单不会返回。

第二种情况（请参见下图），当我从较小的屏幕向后扩展屏幕时，导航栏完全混乱了。我不知道我在做什么错。这是我整个导航栏的CSS。

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>