0

I'm working on mobile navigation bar with jQuery. I have a slight issue the jQuery works perfectly with the mobile navigation bar, but when I resize my screen to desktop the desktop navigation disappears.

jQuery(document).ready(function() {
  jQuery(".navtoggle").click(function() {
    jQuery(".nav-menu").slideToggle();
  });
});

Mobile Breackpoints SASS 

@include breakpoint(xxxs) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        margin: 20px 0px;
        display: block;
      }
    }
  }


 @include breakpoint(xxs) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }


@include breakpoint(xs) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }


@include breakpoint(sm) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }


@include breakpoint(table) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }



 @include breakpoint(md) {

  header {
    nav {

      ul {
        background: #6c49b8;
        li {
          display: block;
          border-bottom: 1px solid rgba(0,0,0,.1);
          border-left: none;
          border-right: none;
          padding: 15px;
          &:last-child {
            border-left: none;
            border-right: none;
          }
        }

      }

      .sub-menu  {
        position: relative;
        top: 0;
        padding: 0px;
        background-color: #563a92;
        z-index: 1;
      }
    }
  }


    .second-navbar {
      #open {
        height: auto;
        margin: 20px 0px;
        display: block;
      }
    }
  }
Stickers
  • 75,527
  • 23
  • 147
  • 186
Brandon Powell
  • 105
  • 1
  • 11

1 Answers1

1

I'll try to answer this without seeing your HTML, but if your navigation is the same .nav-menu element on mobile as it is on desktop, then I'd guess that this is happening because you're toggling your navigation from hidden to visible with your jQuery function. So if you resize once the navigation is hidden, it'll be hidden on desktop as well.

You can make sure that your desktop navigation is always visible by using a media query such as @media (min-width: 768px) where your .nav-menu display is explicitly set to block. (Potentially set to display:block !important;

That way, no matter what a user did with your mobile toggle button, the browser knows that any time your screen width is over 768px, show the navigation.

Ryan Green
  • 538
  • 3
  • 11