CODEWITHSUNDEEP
jqueryhtmlcss
doknow
doknow

Reputation: 13

Showing menu on larger devices after hamburger close

I'm a beginner and need some advice. I'm trying to build hamburger menu with JQuery and HTML and CSS and The menu, after closing through the close button, is not showing again when I resize screen to larger resolutions. Someone could help me? Here is the Html code and CSS and JQuery:

 $(document).ready(function(){
    
          $(".menu-close").hide();
    
          $(".menu-open").click(function() {
        $(".nav-bar").slideToggle("slow", function() {
          $(".menu-open").hide();
          $(".menu-close").show();
        });
      });
    
          $(".menu-close").click(function() {
        $(".nav-bar").slideToggle("slow", function() {
          $(".menu-close").hide();
          $(".menu-open").show();
        });
      });
    });
    .page-header {
      position: relative;
      background-color: #FFFFFF;
     }

    .logo-wrapper {
      padding: 20px;
    }
    
    .menu-open {
      position: absolute;
      top: 0;
      right: 15px;
    }
    
    .menu-close {
      position: absolute;
      top: 0;
      right: 15px;
    }
    
    .nav-bar {
      text-align: center;
      display: none;
    }
    
    .nav-list {
      list-style: none;
      padding: 0;
    }
    
    .nav-item {
      padding: 12px 0;
      border-bottom: 1px solid #FAFAFA;
    }
    
    /*---MEDIA QUERIES---*/
    
        @media screen and (min-width: 768px) {
      button {
        display: none;
      }
      
      .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      
      .nav-bar {
        display: block;
      }
      
      .nav-item {
        display: inline-block;
        padding: 10px 15px;
      }
    }
    <header class="page-header">
      <div class="logo-wrapper">
        <i class="fa fa-superpowers" aria-hidden="true"></i>
      </div>
      <button class="menu-open">O</button>
      <button class="menu-close">X</button>
      <nav class="nav-bar">
        <ul class="nav-list">
          <li class="nav-item">Home</li>
          <li class="nav-item">About</li>
          <li class="nav-item">Projects</li>
          <li class="nav-item">Contact</li>
          <li class="nav-item">Sign up</li>
        </ul>
      </nav>
    </header>

Actually, I need a change in the code so that by changing the size of the page, I can re-appear and display my menu without encountering another error.

Upvotes: 1

Views: 35

Answers (1)

RemyaJ
RemyaJ

Reputation: 5526

    $(window).on("resize", function(event){ 
if( $(this).width() > 767 ){
 $('.nav-bar').show();
 });

Once closed, display: none will be applied to it, that is why it doesnt appear. Another option would be to add display: block ! important; in media query for screen min width 767px

Upvotes: 2

Related Questions