Показаны разные модели на устройствах

Я хочу показать другое меню на основе разных устройств, таких как мобильные и таблицы. Я хочу показать меню с помощью sidr. и для представления меню больших устройств должно быть зафиксировано меню bootstreap. Как для того чтобы достигнуть этого моего кодПоказаны разные модели на устройствах

Моего кода

<div id="large-menu"> 
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">My Site</a> 
      </div> 
      <!-- Collection of nav links and other content for toggling --> 
      <div id="navbarCollapse" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="Login">Login </a></li> 
        <li><a href="SignUp">Sign Up</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="AboutUs">About Us</a></li> 
        <li><a href="ContactUs">Contact Us</a></li> 
        <li><a href="Terms">Terms & condition</a></li> 
        <li><a href="Privacy">Privacy policy</a></li> 
        <li><a href="Careers">Career </a></li> 
        <li><a href="business">Business</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 
<div id="mobile-menu"> 
    <div class="bottom-logo"> 
     <a id="simple-menu" href="#sidr" style="font-size: 50px"><i class="fa fa-list"></i></a> 
     <a href="http://www.example.com" style="font-size: 50px">MySite</a> 
    </div> 
    <div id="sidr"> 
     <ul> 
      <li><a href="Login">Login </a></li> 
      <li><a href="SignUp">Sign Up</a></li> 
      <li><a href="ForgetPassword">Forget Password</a></li> 
      <li><a href="AboutUs">About Us</a></li> 
      <li><a href="ContactUs">Contact Us</a></li> 
      <li><a href="Terms">Terms & condition</a></li> 
      <li><a href="Privacy">Privacy policy</a></li> 
      <li><a href="Careers">Career </a></li> 
      <li><a href="business">Business</a></li> 
     </ul> 
    </div> 
</div>

Моего полного код HERE

источник

2016-07-20 xrcwrn

Вы хотите показать мобильное меню только в мобильном устройстве и большое меню, только в большом устройстве, я Я прав? –

Да, вы правы – xrcwrn

, тогда обратитесь к моему ответу –

Есть два меню в вашем коде, для мобильного зрения и для большого зрения. В большом зрения я просто скрыть небольшое меню и показать большое меню с использованием @media (min-width: 769px){} и для мобильного зрения я просто скрыть большое меню & показать небольшое меню с использованием @media (max-width: 768px){}

@media (max-width: 768px){ 
    #large-menu{ 
    display: none; 
    } 
    #mobile-menu{ 
    display: block; 
    } 
} 

@media (min-width: 769px){ 
    #large-menu{ 
    display: block; 
    } 
    #mobile-menu{ 
    display: none; 
    } 
}

источник

2016-07-20 10:24:24

решить мою проблему, добавив этот медиа-запрос

@media screen and (min-width: 0px) and (max-width: 768px) { 
     #mobile-menu{ 
      display: block; 
     } 
     #large-menu{ 
      display: none; 
     } 
     } 

    @media screen and (min-width: 769px) and (max-width: 2000px) { 
     #mobile-menu{ 
      display: none; 
     } 
     #large-menu{ 
      display: block; 
     } 
      body { 
      padding-top: 50px; 
     } 
    }

Работа ссылка here ссылка на stackoverflow

источник

2016-07-20 10:46:11 xrcwrn

Хорошо, вы можете написать «media (max-width: 768px) {}", а не «медиа-экран» и (min-width: 0px) и (max-width: 768px) { }». –

А как насчет после 2000px? –

Показаны разные модели на устройствах

ответ

Смежные вопросы