changing position of div on window resize

Question

i'm trying to change div position when screen size is less than 481px , I've navigation after slider almost in middle of page but in mobile view it needs to be above slider , this is what i'm try to do

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

here is my navigation code

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

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

but this is not working for me , how di get it done propely pleas help

Answer 1

Try media Query to do that

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

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

and in html side create div with that id

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

I am create a small jsfiddle for you