issue with CSS minus margin - html

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">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</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

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">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</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>

Answer 3

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.