changer la position de div sur la fenêtre redimensionner

Question

Je suis en train de changer la position div quand la taille de l'écran est inférieure à 481px, J'ai la navigation après le curseur presque au milieu de la page, mais en vue mobile, il doit être au dessus du curseur est ce que je vais essayer de faire

<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> 

ici est mon code de navigation

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

bascule navigation

 <!-- 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> 

mais cela ne fonctionne pas pour moi, comment di obtenir fait propely plaidoyers aider

Answer 1

Essayez la question des médias à faire

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

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

et créer côté html div avec cette id

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

Je suis créer un petit jsfiddle pour vous