issue with CSS minus margin

Question

i have use minus margin to place the navbar inside a div which has a class main..in small screen when i click on the navbar toggler icon it does not look good..because i need to change the margin again...how can i solve this problem without using minus margin?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="top"></div>
<div class="wrapper">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
        <button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navDrop">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">HOME</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">SKILL</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">PORTFOLIO</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">TEAM</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">BLOG</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="main"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-    bootstrap/4.1.1/js/bootstrap.min.js"></script>

here is output of my code: https://codepen.io/Sakhawat5/pen/NzwQJz

Answer 1

--Update--

As I think your question is how to append the navbar class to the main div if the user has scrolled more then 50px. This is what could help you out.

$(document).scroll(function() {
  if ($(document).scrollTop() >= 50) {
    // user scrolled 50 pixels or more;
    // do stuff for example:
     $('.navbar').appendTo('.main');
    // this will append the navbar to the main div, if you want other styling on the navbar aswell we can do the following:
     $('.navbar').addClass('.UserHasScrolled')  
    // now in you CSS set styling to .UserHasScrolled
  } else {
    // do things when user has NOT scrolled more then 50px
  }
});

Also make sure to include jQuery, this is possible, paste this beneath all other scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

To your .UserHasScrolled class you can set something like this:

.UserHasScrolled {
     position: absolute;
     width: 100%;
     top: 0;
}

--First answer--

What you ask for is: @media screen and (max-width 767px) while the screen width has a lower size than 767px you can define an overwriting css style like this:

@media screen and (min-width 767px) {
   .navbar {
        margin-bottom: -336px;
   }
}

But this causes another problem, while the navbar is closed the main class will still have a margin of -336px and that's not what you want I guess.

To keep your navbar on top just set position to fixed:

.navbar {
     position: fixed;
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
}

Answer 2

The changes to your CSS as follows should fix the issue:

.navbar{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    position: fixed;
}

and if you don't want a fixed nav:

.navbar{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    position: absolute;
}

Let me know if you have any questions.

Answer 3

This is your solution:

.top{
  height:50px;
  background:red;
}
.navbar{
  margin-left:20px;
  margin-right:20px;
}
.main{
  height:1500px;
  background:orange;
}

<div class="top"></div>
<div class="wrapper">
  <div class="main">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
		    <button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
				    <span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navDrop">
				    <ul class="navbar-nav">
						    <li class="nav-item">
							      <a href="#" class="nav-link">HOME</a>
						    </li>
						    <li class="nav-item">
							      <a href="#" class="nav-link">ABOUT</a>
						    </li>
						    <li class="nav-item">
							      <a href="#" class="nav-link">SKILL</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">PORTFOLIO</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">TEAM</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">BLOG</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">CONTACT</a>
						   </li>
					 </ul>
			</div>
  </nav>
  </div>
</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-    bootstrap/4.1.1/js/bootstrap.min.js"></script>