Скрыть кнопки до тех пор, пока они не будут показаны на мобильном устройстве в загрузочном блоке

Question

Я использую Bootstrap для создания моего сайта. Я использую стили nabber и стили сворачивания. На моем сайте у меня есть панель навигации наверху, которая содержит три кнопки: «Главная», «Онлайн-раздача», «Времена» &. Это то, что я называю «ссылками быстрого доступа». Вниз по странице У меня есть основные ссылки, которые используются для доступа к другим страницам моего сайта. Я хочу использовать стиль сбрасывания бутстрапа, чтобы свернуть ссылки при просмотре на мобильном веб-сайте, чтобы все ссылки были доступны из кнопки переключения на навигационной панели и скрыть основные ссылки, которые находятся на моей странице, и перенести их на навигационную панель в вершина. Я не уверен, что я имею в виду. Ниже мой код.

<!-- Quick Navs --> 
<nav class="navbar navbar-inverse quick-nav" role="navigation"> 
    <div class="container"> 
     <a class="navbar-brand" href="/">Home</a> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#" target="_blank">ONLINE GIVING</a></li> 
      <li><a href="/whoweare">TIMES & LOCATION</a></li> 
     </ul> 
    </div> 
</nav> 


<div class="container header"> 
    <div class="inner-header"> 
     <p class="logo"><a href="/"><img src="/assets/images/fplogo-2.png" alt="logo"></a></p> 

     <nav class="navbar primary-nav" role="navigation"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="/nextsteps">Next Steps</a></li> 
       <li><a href="/events">Events</a></li> 
       <li><a href="/ministries">Ministries</a></li> 
       <li><a href="/whoweare">Who We Are</a></li> 
       <li><a href="/listen">Listen</a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

Answer 1

Попробуйте это:

здесь вы можете изменитькласс = "glyphicon glyphicon-шеврон-левый">

<div class="container header"> 
    <div class="inner-header"> 
    <p class="logo"><a href="/"><img src="/assets/images/fplogo-2.png" alt="logo"> </a></p> 

    <p class="visible-xs visible-sm "> 
       <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i 
         class="glyphicon glyphicon-chevron-left"></i></button> 
    </p> 

     <nav class="navbar primary-nav hidden-xs hidden-sm" role="navigation" id="mobile_menu"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/nextsteps">Next Steps</a></li> 
     <li><a href="/events">Events</a></li> 
     <li><a href="/ministries">Ministries</a></li> 
     <li><a href="/whoweare">Who We Are</a></li> 
     <li><a href="/listen">Listen</a></li> 
     </ul> 
     </nav> 
    </div> 
</div> 

Js:

$(document).ready(function() { 
     $('[data-toggle=offcanvas]').click(function() { 
     $('#mobile_menu').toggleClass('active'); 
     }); 
    });