изменение положения div на размер окна

Question

Я пытаюсь изменить положение div, когда размер экрана меньше 481px, У меня есть навигатор после слайдера почти в середине страницы, но в мобильном режиме он должен быть выше слайдера, это является то, что я пытаюсь сделать

<style type="text/css"> 
    .navPosition{position: relative;top: 0 !important;margin-bottom: 100px;} 
</style> 
    <script src="js/bootstrap.js" type="text/javascript"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $width=$(window).width(); 
       if($width<481){ 
         $("#navbg").addClass("navPosition"); 

       } 

      }); 

     </script> 

здесь мой навигации код

<nav class="navbar" role="navigation" id="navbg"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 

Переключение навигации

 <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav home-nav"> 
       <li> <a href="#">Home</a></li> 
       <li> <a href="#">About us</a></li> 
       <li> <a href="#">Academics</a></li> 
       <li> <a href="#">News & Events</a></li> 
       <li> <a href="#">Contact us</a></li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

, но это не работает для меня, как ди сделать это propely мольбы помочь

Answer 1

Попробуйте средств массовой информации запрос, чтобы сделать

div#demo { 
    position: relative; 
    margin-top:10px; 
} 

@media only screen and (max-width: 481px) { 
    div#demo{ 
     margin-top:200px; 
    } 
} 

и в HTML стороне создать DIV с этим id

<div id='demo'> This is the demo for media query</div> 

Я создаю небольшой jsfiddle для вас