Problem to overlay content when hamburger icon is pressed on mobile

user_11617966 0
Viewed 974

I want my navbar to cover the whole screen when the hamburger menu is pressed on smaller screens.

I added the .pushclass (see the jquery and css) to fire when the .navbar-toggle-icon is pushed.

for some reason I can't find out why it is not working and in addition to that problem, the Jquery that makes the navbar sticky on scroll is not working after I added the function to fire the .push class.

So as my code stands now it is not giving me the full screen navbar on mobile and the navbar is no longer sticky on scroll.

i've spent most of the day trying to find a fix for this but with out any luck.

Can someone please held me here?

here is a fiddle to the code 

$(window).scroll(function(){
  var stickyNav = $('.nav-header'),
  scroll = $(window).scrollTop();

  if (scroll >=100)
  {stickyNav.addClass('sticky');
   $('.nav-header').css("margin-top", "0");
}

  else {stickyNav.removeClass('sticky');
    $('.nav-header').css("margin-top", "1vh");
}
});

$(document).ready(function(){
 $('.bg-img').each(function() {
  var $el = $(this).find('> img');
  if ($el.length > 0) {
   $(this).css('background-image', 'url(' + $el.attr('src') + ')');
  }
 });


  $('.navbar-toggler-icon').on('click', function(e) {
  if (!$('html').hasClass('push')) {
   $('html').addClass('push');
  } else {
   $('html').removeClass('push');
  };
  e.preventDefault();

    console.log('its alive');
 });


});
/* $background_color_2: rgba(0, 0, 0, 0);
 */
 body {
  color: #4b4b4b;
}
 nav {
  padding: 20px 0 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
 figure {
  margin: 0;
}
 .bg-img {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
 .bg-img > img {
  display: none;
}
 .header-row {
  background-color: #c2002d;
  border-bottom: 1px solid #d3d3d3;
}
 .bg-banner {
  background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 15vh;
  border-left: 5px solid #fff;
}
 .banner-logo {
  background-color: #c2002d;
  padding: 20px;
}
 .banner-logo a.brand-text {
  text-decoration: none;
  font-size: 2em;
  color: #fff;
}
 .nav-header {
  border-bottom: 1px solid #d3d3d3;
  background-color: #fff;
  z-index: 10000;
}
 .sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
 @media (min-width: 768px) {
  .nav-wrapper {
   margin-top: 10vh;
   border: none;
   border-bottom: 1px solid #d3d3d3;
 }
}
 .navbar {
  padding: 0;
}
 .navbar-toggler:active, .navbar-toggler:focus {
  outline: none;
}
 .navbar-custom .navbar-toggler-icon {
  width: 24px;
  height: 17px;
  background-image: none;
  position: relative;
  transition: all 300ms linear;
}
 .navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
  width: 24px;
  position: absolute;
  height: 1px;
  background-color: #000;
  top: 0;
  left: 0;
  content: '';
  z-index: 2;
  transition: all 300ms linear;
}
 .navbar-custom .navbar-toggler-icon::after {
  top: 8px;
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(45deg);
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: translateY(8px) rotate(-45deg);
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  border-color: transparent;
}
 .nav-link {
  position: relative;
  padding: 5px 0 !important;
  display: inline-block;
  color: #4b4b4b;
  font-weight: 500;
  transition: all 200ms linear;
}
 .nav-item:hover .nav-link {
  color: #3b3b3b;
}
 .nav-item.active .nav-link {
  color: #c2002d;
}
 .nav-item::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #c2002d;
  opacity: 0;
  transition: all 200ms linear;
}
 .nav-item:hover::after {
  bottom: 0;
  opacity: 1;
}
 .nav-item.active:hover::after {
  opacity: 0;
}
 .nav-item {
  position: relative;
  margin-left: 50px;
  transition: all 200ms linear;
}
 .navbar-brand > img {
  display: block;
}
 @media (max-width: 767px) {
  .push {
   overflow: hidden;
   height: 100%;
 }
  .push body {
   overflow: hidden;
   height: 100%;
 }
  .push .navbar-toggler-icon::before {
   opacity: 0;
 }
  .push .navbar-toggler-icon::after {
   top: 8px;
 }
  .push .navbar-toggler-icon span::before {
   top: 8px;
 }
  .push .navbar-toggler-icon span::before .push #nav-wrapper {
   opacity: 1;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }
}
 .content {
  min-height: 100vh;
  order: 2;
  padding-top: 5vh;
}
 @media (min-width: 1200px) {
  .content {
   margin-left: 200px;
   margin-right: 200px;
 }
}
 .box-item {
 /* height: 7vh;
  */
  margin-bottom: 10px;
  max-width: 100vw;
  padding: 17px 36px 7px 17px;
  background: #fff;
  border: 1px solid lightgray;
  transition: all 0.3s ease;
}
 .box-item > .descr {
  flex-grow: 1;
}
 .box-item > .descr header {
  position: relative;
  margin-bottom: 5px;
  padding-bottom: 5px;
}
 .box-item > .descr header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 37px;
  height: 3px;
  border-bottom: 1px solid;
}
 .box-item > .descr header h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
}
 .box-item > .descr p {
  margin-bottom: 0;
  font-size: 0.8rem;
}
 .box-item > .descr a {
  transition: none;
}
 .box-item > .descr a:hover {
  color: inherit;
}
 .box-item > .descr a:focus {
  color: inherit;
}
 .box-item > .descr footer {
  margin-top: 0px;
  text-align: right;
}
 .box-item > .descr .see-more {
  position: relative;
  bottom: 6px;
  font-size: 12px;
  line-height: 1px;
}
 .box-item:hover {
  background-color: #c2002d;
  color: #fff;
}
 .box-item:hover > .descr .see-more::before {
  color: inherit;
}
 .box-item:focus {
  background-color: #c2002d;
  color: #fff;
}
 .box-item:focus > .descr .see-more::before {
  color: inherit;
}
 .box-item > .bg-img {
  border: 1px solid lightgray;
  margin-bottom: 10px;
 /* max-height: 80px;
  */
}
 @media (max-width: 767px) {
  .box-item {
   padding: 20px;
 }
  .box-item > .bg-img {
   padding-bottom: 40%;
 }
}
 @media (min-width: 768px) {
  .box-item {
   display: -ms-flexbox;
   display: -webkit-flex;
 }
  .box-item > * {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
 }
  .box-item > .bg-img {
   flex-basis: 100px;
   min-width: 100px;
   max-width: 100px;
   margin-right: 28px;
 }
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <header>
      <div class="container-fluid">
         <div class="row header-row">
           <div class="col-md-3 banner-logo text-center mx-auto my-auto">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>


  <div class="container-fluid nav-header" id="nav-wrapper">
    <div class="row">
      <div class="col-12">
        <nav class="navbar navbar-custom navbar-expand-md ">
          <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarDropdown">
         <ul class="navbar-nav mx-auto">
          <li class="nav-item ">
           <a class="nav-link " href="#"> home</a>
          </li>
                  <li class="nav-item ">
                    <a class="nav-link" href="#">Collections</a>
                  </li>
          <li class="nav-item ">
           <a class="nav-link" href="#">link</a>
          </li>
          <li class="nav-item ">
           <a class="nav-link" href="#">link</a>
          </li>
          <li class="nav-item">
           <a class="nav-link" href="#">link</a>
          </li>
         </ul>
        </div>
            </nav> <!-- Navabar Handrit Ends -->

      </div>
    </div>
  </div>
<div class="container d-flex w-100">
  <div class="col content">
     <div class="row inst-spacer">

        <div class="col-lg-12 col-xl-12 ">


           <div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
             <figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
             <div class="descr">
                <header>
                  <h4><a href="#">title</a></h4>
                </header>
                <p>name: Some name </p>
                <p> origin: some origin </p>
              </div>
              <!-- / descr -->
           </div>
           <!-- / box-item -->
         


        </div>
        <!-- / col -->
     </div>
  </div>

</div>

  <footer>
    #Footer
  </footer>


  </body>

twitter-bootstrap css html jquery javascript
1 Answers

If I understand your question correctly you want the .nav-bar to fill the view port height when you are on smaller devices. If that's what you want then all you need is to add this to your css.

.navbar-nav{
min-height: 100vh;
}

then you don't need the .push class and the Jquery function for the .push class. It is just complicating things.

I don't follow what you are saying about the .sticky it seems to be ok. But perhaps you want to post another question regarding that issue.

Here is a working snippet for you with the added .navbar-nav class. 

$(window).scroll(function(){
  var stickyNav = $('.nav-header'),
  scroll = $(window).scrollTop();

  if (scroll >=100)
  {stickyNav.addClass('sticky');
   $('.nav-header').css("margin-top", "0");
}

  else {stickyNav.removeClass('sticky');
    $('.nav-header').css("margin-top", "1vh");
}
});

$(document).ready(function(){
 $('.bg-img').each(function() {
  var $el = $(this).find('> img');
  if ($el.length > 0) {
   $(this).css('background-image', 'url(' + $el.attr('src') + ')');
  }
 });


 

});
/* $background_color_2: rgba(0, 0, 0, 0);
 */
 body {
  color: #4b4b4b;
}
 nav {
  padding: 20px 0 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
 figure {
  margin: 0;
}
 .bg-img {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
 .bg-img > img {
  display: none;
}
 .header-row {
  background-color: #c2002d;
  border-bottom: 1px solid #d3d3d3;
}
 .bg-banner {
  background: url("https://images.unsplash.com/photo-1560953945-a4d94ab4d351?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80") no-repeat center center fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 15vh;
  border-left: 5px solid #fff;
}
 .banner-logo {
  background-color: #c2002d;
  padding: 20px;
}
 .banner-logo a.brand-text {
  text-decoration: none;
  font-size: 2em;
  color: #fff;
}
 .nav-header {
  border-bottom: 1px solid #d3d3d3;
  background-color: #fff;
  z-index: 10000;
}
.navbar-nav{
  min-height: 100vh;
}

 .sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
 @media (min-width: 768px) {
  .nav-wrapper {
   margin-top: 10vh;
   border: none;
   border-bottom: 1px solid #d3d3d3;
 }
}
 .navbar {
  padding: 0;
}
 .navbar-toggler:active, .navbar-toggler:focus {
  outline: none;
}
 .navbar-custom .navbar-toggler-icon {
  width: 24px;
  height: 17px;
  background-image: none;
  position: relative;
  transition: all 300ms linear;
}
 .navbar-custom .navbar-toggler-icon::after, .navbar-custom .navbar-toggler-icon::before {
  width: 24px;
  position: absolute;
  height: 1px;
  background-color: #000;
  top: 0;
  left: 0;
  content: '';
  z-index: 2;
  transition: all 300ms linear;
}
 .navbar-custom .navbar-toggler-icon::after {
  top: 8px;
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(45deg);
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: translateY(8px) rotate(-45deg);
}
 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  border-color: transparent;
}
 .nav-link {
  position: relative;
  padding: 5px 0 !important;
  display: inline-block;
  color: #4b4b4b;
  font-weight: 500;
  transition: all 200ms linear;
}
 .nav-item:hover .nav-link {
  color: #3b3b3b;
}
 .nav-item.active .nav-link {
  color: #c2002d;
}
 .nav-item::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #c2002d;
  opacity: 0;
  transition: all 200ms linear;
}
 .nav-item:hover::after {
  bottom: 0;
  opacity: 1;
}
 .nav-item.active:hover::after {
  opacity: 0;
}
 .nav-item {
  position: relative;
  margin-left: 50px;
  transition: all 200ms linear;
}
 .navbar-brand > img {
  display: block;
}

  @media (max-width: 767px) {
  .push {
   overflow: hidden;
   height: 100%;
 }
  .push body {
   overflow: hidden;
   height: 100%;
 }
  .push .navbar-toggler-icon::before {
   opacity: 0;
 }
  .push .navbar-toggler-icon::after {
   top: 8px;
 }
  .push .navbar-toggler-icon span::before {
   top: 8px;
 }

   .push #navbarDropdown {
   opacity: 1;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }
}
 .content {
  min-height: 100vh;
  order: 2;
  padding-top: 5vh;
}
 @media (min-width: 1200px) {
  .content {
   margin-left: 200px;
   margin-right: 200px;
 }
}
 .box-item {
 /* height: 7vh;
  */
  margin-bottom: 10px;
  max-width: 100vw;
  padding: 17px 36px 7px 17px;
  background: #fff;
  border: 1px solid lightgray;
  transition: all 0.3s ease;
}
 .box-item > .descr {
  flex-grow: 1;
}
 .box-item > .descr header {
  position: relative;
  margin-bottom: 5px;
  padding-bottom: 5px;
}
 .box-item > .descr header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 37px;
  height: 3px;
  border-bottom: 1px solid;
}
 .box-item > .descr header h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
}
 .box-item > .descr p {
  margin-bottom: 0;
  font-size: 0.8rem;
}
 .box-item > .descr a {
  transition: none;
}
 .box-item > .descr a:hover {
  color: inherit;
}
 .box-item > .descr a:focus {
  color: inherit;
}
 .box-item > .descr footer {
  margin-top: 0px;
  text-align: right;
}
 .box-item > .descr .see-more {
  position: relative;
  bottom: 6px;
  font-size: 12px;
  line-height: 1px;
}
 .box-item:hover {
  background-color: #c2002d;
  color: #fff;
}
 .box-item:hover > .descr .see-more::before {
  color: inherit;
}
 .box-item:focus {
  background-color: #c2002d;
  color: #fff;
}
 .box-item:focus > .descr .see-more::before {
  color: inherit;
}
 .box-item > .bg-img {
  border: 1px solid lightgray;
  margin-bottom: 10px;
 /* max-height: 80px;
  */
}
 @media (max-width: 767px) {
  .box-item {
   padding: 20px;
 }
  .box-item > .bg-img {
   padding-bottom: 40%;
 }
}
 @media (min-width: 768px) {
  .box-item {
   display: -ms-flexbox;
   display: -webkit-flex;
 }
  .box-item > * {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
 }
  .box-item > .bg-img {
   flex-basis: 100px;
   min-width: 100px;
   max-width: 100px;
   margin-right: 28px;
 }
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
    <header>
      <div class="container-fluid">
         <div class="row header-row">
           <div class="col-md-3 banner-logo text-center mx-auto my-auto">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>


  <div class="container-fluid nav-header" id="nav-wrapper">
    <div class="row">
      <div class="col-12">
        <nav class="navbar navbar-custom navbar-expand-md ">
          <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarDropdown">
         <ul class="navbar-nav mx-auto">
          <li class="nav-item ">
           <a class="nav-link " href="#"> home</a>
          </li>
                  <li class="nav-item ">
                    <a class="nav-link" href="#">Collections</a>
                  </li>
          <li class="nav-item ">
           <a class="nav-link" href="#">link</a>
          </li>
          <li class="nav-item ">
           <a class="nav-link" href="#">link</a>
          </li>
          <li class="nav-item">
           <a class="nav-link" href="#">link</a>
          </li>
         </ul>
        </div>
            </nav> <!-- Navabar Handrit Ends -->

      </div>
    </div>
  </div>
<div class="container d-flex w-100">
  <div class="col content">
     <div class="row inst-spacer">

        <div class="col-lg-12 col-xl-12 ">


           <div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
             <figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
             <div class="descr">
                <header>
                  <h4><a href="#">title</a></h4>
                </header>
                <p>name: Some name </p>
                <p> origin: some origin </p>
              </div>
              <!-- / descr -->
           </div>
           <!-- / box-item -->
         
         
           <div class="box-item animation-top d-lg-flex flex-lg-row mb-3">
             <figure class="bg-img"><img src="https://images.unsplash.com/photo-1561028526-675bc91a7dc4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="#"></figure>
             <div class="descr">
                <header>
                  <h4><a href="#">title</a></h4>
                </header>
                <p>name: Some name </p>
                <p> origin: some origin </p>
              </div>
              <!-- / descr -->
           </div>
           <!-- / box-item -->


        </div>
        <!-- / col -->
     </div>
  </div>

</div>

  <footer>
    #Footer
  </footer>


  </body>

user_68935340
Related