Twitter bootstrap 移动设备页面导航栏覆盖幻灯片放映Boostrap 3

我已经好几年没有编过网页了，现在正慢慢地重新开始。试图更新我的工作页面，因为它看起来已经过时了。我正在使用Bootstrap3和一个模板Ruma。我已经用我想要的内容替换了大部分内容，但仍然需要调整一些颜色

当我在移动设备或Responsiator上查看站点时，导航栏会覆盖幻灯片。我需要做什么才能将内容向下推，使导航栏不会覆盖在移动设备上的幻灯片上

是否可以使用javascript将移动设备的徽标更改为更小的尺寸？我玩过一些东西，但我的尝试没有成功

导航栏的代码为：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="img/new_testsm.png" alt="BB" /></a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">HOME</a></li>
                 <li><a href="products.html">PRODUCTS</a></li>
                <li><a href="buy.html">BUY </a></li>
                 <li><a href="about.html">ABOUT</a></li>
                  <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </div>

    </div>
</div>

---

如果你们能提供任何帮助，我们将不胜感激。我自己慢慢地弄明白了一些东西，但有些东西似乎让我摸不着头脑。

您不需要使用JS交换图像，只需使用引导程序在特定视图中显示即可

导航栏标志：

<a class="navbar-brand hidden-xs" href="index.html"><img src="img/new_testsm.png" alt="BB" /></a>
<a class="navbar-brand visible-xs-*" href="index.html"><img src="img/new_testsm2.png" alt="BB" /></a>

@media标记查找设备当前视口的最大宽度，在CSS中充当if语句

引导将767px标识为移动设备。下图显示了每个设备的引导信息。请根据需要调整

---

你能提供一个JSFIDLE吗？你能告诉我什么是JSFIDLE吗？我在谷歌上搜索过，但不确定你想让我做什么。但是我会提供你需要的任何东西。使用JSFIDLE的引导版本来创建一个你看到的示例，为你提供一个解决方案会更容易。但是，它不包括图像，因为它们是本地的。我正在尝试构建它，在我的机器上工作，在各种设备上测试，然后作为一个整体上传。对图像托管的建议，以便您可以查看所有内容？或

$(window).scroll(function () {
           if ($(".navbar").offset().top >50) {
               $(".navbar-fixed-top").removeClass("small-logo");
               $(".navbar-fixed-top").addClass("navbar-pad-original");
               $(".navbar-fixed-top").addClass("navbar-brand");
               $(".navbar-fixed-top").attr('src', 'img/new_testsm.png');

            } else {
              $(".navbar-fixed-top").removeClass("navbar-pad-original");
              $(".navbar-fixed-top").removeClass("navbar-brand");
              $(".navbar-fixed-top").addClass("small-logo");
              $(".navbar-fixed-top").attr('src', 'img/new_testsm2.png');
            }
         });

<a class="navbar-brand hidden-xs" href="index.html"><img src="img/new_testsm.png" alt="BB" /></a>
<a class="navbar-brand visible-xs-*" href="index.html"><img src="img/new_testsm2.png" alt="BB" /></a>

@media (max-width: 767px) {
  #carousel-example{
    margin-top: 45px;
  }
}