Menu going down together with scrolling the page - html

Question

I have this code:
.navbar-default .navbar-nav>li>a {
width: auto;
/* width: 200px;*/
/* font-weight: bold;*/
}
.mega-dropdown {
position: static !important;
/* width: 100%;*/
}
.mega-dropdown-menu {
padding: 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 300;
line-height: 1.428571429;
color: #243C78;
white-space: normal;
}
.mega-dropdown-menu .dropdown-header {
color: #243C78;
font-size: 18px;
font-weight: 500;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
<section class="indexTop">
<div class="container">
<div class="row indexTopPadding">
<div class="col-xs-8 col-sm-12 col-md-12 col-lg-11 ">
<div class="topData">Poniedziałek, 11 października 2019</div>
</div>
<div class="col-xs-4 col-sm-12 col-md-12 col-lg-1">
<div class="topKontrast">
<img src="images/ikon2.png" class="img-responsive topIkonLeft topIkonLeft5">
<img src="images/ikon1.png" class="img-responsive topIkonLeft topIkonLeft5">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 visible-xs">
<div class="topSocialMedia">
<img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 topMargin30R ">
<div class="logo">
<img src="images/logo.png" class="img-responsive ikonCenterR">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 topMargin10 hidden-xs">
<form method="post" name="contactformXX" class="form validate clearfix validate-form">
<div class="form-group ">
<div class="form-group has-feedback ">
<input type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" /> <span class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span> </div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 hidden-xs">
<div class="topSocialMedia">
<img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10">
</div>
</div>
</div>
</div>
</section>
<!-- END TOP-->
<!-- MENU-->
<div class="paddingMenuTop"></div>
<nav class="navbar navbar-default navbarDefaultMop ">
<div class="container">
<!-- navbar-fixed-top -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand visible-xs" href="#">MegaMenu</a></div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown menuMop"> Item xxx1
<ul class="dropdown-menu mega-dropdown-menu row dropdownMenuMop">
<div class="container topMenuColor">
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">Sprawy </li>
<li>pozycja 1</li>
<li>pozycja 2</li>
<li>pozycja 3</li>
<li>pozycja 4</li>
<li>pozycja 5</li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">pozycje 5</li>
<li>Bezpłatana imnformaja</li>
<li>dream</li>
<li>Callendar</li>
<li>Archiwum Mewspow</li>
</ul>
</li>
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">My life </li>
<li>Health</li>
<li>Bicycles</li>
<li>Cars</li>
<li>Education</li>
<li>Cash</li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">Fundation</li>
<li>xdcsdcsd cdscdscds</li>
<li>Magazine</li>
<li>Items</li>
<li>Items2</li>
</ul>
</li>
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">My life </li>
<li>Health</li>
<li>Bicycles</li>
<li>Cars</li>
<li>Education</li>
<li>Cash</li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">Fundation</li>
<li>xdcsdcsd cdscdscds</li>
<li>Magazine</li>
<li>Items</li>
<li>Items2</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li>Default Navbar</li>
<li>Lovely Fonts</li>
<li>Responsive Dropdown </li>
<li class="dividerMop"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email"> </div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
<li class="dropdown-header">zamknij mnie2
<button type="button" class="close">×</button>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
I have a problem with the menu (NAVBAR).
I would like it to descend with scrolling the page down (stuck to the top of the browser).
The effect that I would like to get is here: https://www.gdynia.pl
Dla mieszkańców, aktualności, dla turystów, o Gdyni,
Does anyone know how to improve my code to get this effect?
Prview: http://serwer1356363.home.pl/pub/menu_fixed/

Answer 1

You can add to .navbar some other class with style like this: position: fixed; top:0; and replace position:relative with position:fixed;.
- Add this class only after you scroll down some pixels.
- If you not scrolled some pixels use remove or don't add class.
- Use Javascript or JQuery to detect how many user already scrolled pixels and also to add or remove element class.
I think everything is clear here. I just opened your site and used chrome dev tools to see applied effects. Just play with code and styles. After apply changes in real code.
You can look more here: set div position to fixed after scrolling 100px?