固定导航栏在添加flexslider后不再保持固定状态

Question

我刚刚开始学习HTML和CSS，并且在添加定时flexslider之前创建了一个简单的顶部导航栏，它仍然固定在页面顶部。添加滑块后，导航栏不再固定在视口顶部，即使我没有更改导航栏CSS。提前感谢任何想法！

我的HTML是：

 <div class="top-bar">

   <section class="logo">
      <ul>
        <li><a href="#"><img src="img/logo.jpg" id="logo"></a></li>
      </ul>
    </section>   

    <section class="nav-bar">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </section>

我的CSS是：

.top-bar {
    width: 100%;
    height: 7.5%;
    top: 0;
    opacity: 0.8;
    position: fixed;
    z-index: 10;
    display: inline-block;
}


#logo {
    width: 2.0vw;
    z-index:20;
}

.nav-bar {
    position: fixed;
    right: 27.5%;
    z-index: 15;
}

再次感谢您的帮助！