Search code examples
htmljquerycssresponsive-designmedia-queries

Issues with a hamburger menu

I'm playing around with a simple hamburger menu and I somehow cannot get it right. The idea.

  1. On larger screen the page should look nearly like this:

enter image description here

  1. On smaller screen we will see a hamburger menu, like this:

enter image description here

  1. The hamburger might be expanded on click, like this:

enter image description here

So far so good. Here is my main idea how to structure this:

<div class="home-navbar">
      
      <div class="home-navbar-logo-hamburger">
        <!-- LOGO -->
        <h1 class="logo">
          <span class="text-primary"><i class="fas fa-book-open"></i> eL</span>Bi
        </h1>
        <!-- EO: LOGO -->

        <!-- Hamburger menu -->
        <div class="hamburger">
          <i id="hamburger" class="fa-2x fas fa-bars"></i>
        </div>
        <!-- EO: Hamburger menu -->
      </div>
      
      <!-- Menus-->
      <ul class="home-navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
      </ul> 
      <!-- EO: Menus -->     
    </div>
</div>

In short, on larger screens:

  • the hamburger menu icon is hidden
  • the logo and the real menu are visible, in flex layout (flex direction is row)

On smaller screen:

  • the hamburger icon is visible

  • the logo is also visible

  • the real menu is not yet visible but is with flex layout (flex direction is column)

  • when we click the hamburger the menu is shown, by using the following jquery code:

     $(document).ready(function () {
     $("#hamburger").click(function () {
         var visible = $(".home-navbar-menu").is(":visible");
         if (!visible) {
             $(".home-navbar-menu").show();
         } else {
             $(".home-navbar-menu").hide();
         }
     });
})

The problem:

  1. Expand the screen and show the menu for larger screen
  2. Shorten the browser and move to the mobile version
  3. Open and close the mobile menu
  4. Expand the screen

The menu for larger screens is no longer visible... Snippet:

$(document).ready(function () {
    $("#hamburger").click(function () {
        var visible = $(".home-navbar-menu").is(":visible");
        if (!visible) {
            $(".home-navbar-menu").show();
        } else {
            $(".home-navbar-menu").hide();
        }
    });
})
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #fff;
    color: #333;
    line-height: 1.6;
}

.btn {
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    color: #fff;
    background-color: #28a745;
    border: none;
    border-radius: 5px;
}

.home-header {
    background: url('https://source.unsplash.com/1600x900/?nightsky') no-repeat center center/cover;
    height: 100vh;
    position: relative;
    color: #fff;
}

.home-header .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 20px 20px
}

.home-header .content h1 {
    font-size: 3rem;
}

.home-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: right;
    color: #fff;
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 20px
}

.home-navbar {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 70px;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
    background: black;
}

.home-navbar-menu a {
    color: #fff;
    padding: 10px 20px;
    margin: 0 5px;
    text-decoration: none;
}

.home-navbar-menu li {
    display: flex;

    align-items: center;
}

.home-navbar-menu a:hover {
    border-bottom: #28a745 2px solid;
}

/* Text colors */
.text-primary {
    color: #28a745;
}

.hamburger {
    display: none;
}

.home-navbar-logo-hamburger {
    display: flex;
    align-items: center;
}

.logo 
{
    margin-left: 20px;
}

.hamburger 
{
    margin-right: 20px;
}


.home-navbar-menu {
    font-size: 1.2rem;
    list-style: none;
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 724px) {

    .hamburger {
        display: block;
    }

    .home-navbar-logo-hamburger {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .home-navbar {
        display: flex;
        flex-direction: column;
    }

    .home-navbar-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        display: none;
    }
    

    .home-navbar-menu a:hover {
        border-bottom: none;
    }

    .home-navbar-menu li {
        margin: 10px 20px;
        padding-left: 10px;
        text-align: center;
        border-bottom: #28a745 2px solid;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/bdb2495b74.js" crossorigin="anonymous"></script>
    <script
        src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="home-navbar">
      
      <div class="home-navbar-logo-hamburger">
        <!-- LOGO -->
        <h1 class="logo">
          <span class="text-primary"><i class="fas fa-book-open"></i> dA</span>Ba
        </h1>
        <!-- EO: LOGO -->

        <!-- Hamburger menu -->
        <div class="hamburger">
          <i id="hamburger" class="fa-2x fas fa-bars"></i>
        </div>
        <!-- EO: Hamburger menu -->
      </div>
      
      <!-- Menus-->
      <ul class="home-navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
      </ul> 
      <!-- EO: Menus -->     
    </div>

    <!-- Content -->
    <header class="home-header">
        <div class="content">
            <h1>Test!</h1>
            <h2>Test test test</h2>
        </div>
    </header>
    <!-- EO: Content -->

    <!-- Footer -->
    <footer class="home-footer">
        <div>&copy; Acme 2021</div>
    </footer>
    <!-- EO: Footer -->
</body>
</html>

Any advice how to build the menu is appreciated.

Solution

  • It's your media query coupled with your jQuery causing issues.

    Adding this will fix it:

    @media screen and (min-width: 724px) {
  .home-navbar-menu {
        display: flex!important;
    }
}

    Your js/jQuery:

    $(document).ready(function () {
    $("#hamburger").click(function () {
        var visible = $(".home-navbar-menu").is(":visible");
        if (!visible) {
            $(".home-navbar-menu").show();
        } else {
            $(".home-navbar-menu").hide();
        }
    });
})

    When your page collapses to a smaller/mobile view it's hiding the menu via your css. When you want to show the menu again you're using the hamburger menu toggle, thus the jQuery comes into play; this is a show/hide (display flex/display none in your case (ideally)).

    When you set the menu to be hidden on a smaller screen, what you've actually done is set it to display:none. Thus when returning to a larger size screen it's still hidden.

    The media query atop this answer forces it to re-show itself, overriding the jQuery hide.

    Also you can simplify that by changing your js/jQuery to this:

    Final product:

    $(document).ready(function () {
    $("#hamburger").click(function () {
        $(".home-navbar-menu").toggle();
    });
})
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #fff;
    color: #333;
    line-height: 1.6;
}

.btn {
    cursor: pointer;
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    color: #fff;
    background-color: #28a745;
    border: none;
    border-radius: 5px;
}

.home-header {
    background: url('https://source.unsplash.com/1600x900/?nightsky') no-repeat center center/cover;
    height: 100vh;
    position: relative;
    color: #fff;
}

.home-header .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 20px 20px
}

.home-header .content h1 {
    font-size: 3rem;
}

.home-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: right;
    color: #fff;
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 20px
}

.home-navbar {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 70px;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
    background: black;
}

.home-navbar-menu a {
    color: #fff;
    padding: 10px 20px;
    margin: 0 5px;
    text-decoration: none;
}

.home-navbar-menu li {
    display: flex;

    align-items: center;
}

.home-navbar-menu a:hover {
    border-bottom: #28a745 2px solid;
}

/* Text colors */
.text-primary {
    color: #28a745;
}

.hamburger {
    display: none;
}

.home-navbar-logo-hamburger {
    display: flex;
    align-items: center;
}

.logo 
{
    margin-left: 20px;
}

.hamburger 
{
    margin-right: 20px;
}


.home-navbar-menu {
    font-size: 1.2rem;
    list-style: none;
    display: flex;
    flex-direction: row;
}

@media screen and (min-width: 724px) {
  .home-navbar-menu {
        display: flex!important;
    }
}

@media screen and (max-width: 724px) {

    .hamburger {
        display: block;
    }

    .home-navbar-logo-hamburger {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .home-navbar {
        display: flex;
        flex-direction: column;
    }

    .home-navbar-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        display: none;
    }
    

    .home-navbar-menu a:hover {
        border-bottom: none;
    }

    .home-navbar-menu li {
        margin: 10px 20px;
        padding-left: 10px;
        text-align: center;
        border-bottom: #28a745 2px solid;
    }
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/bdb2495b74.js" crossorigin="anonymous"></script>
    <script
        src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="home-navbar">
      
      <div class="home-navbar-logo-hamburger">
        <!-- LOGO -->
        <h1 class="logo">
          <span class="text-primary"><i class="fas fa-book-open"></i> dA</span>Ba
        </h1>
        <!-- EO: LOGO -->

        <!-- Hamburger menu -->
        <div class="hamburger">
          <i id="hamburger" class="fa-2x fas fa-bars"></i>
        </div>
        <!-- EO: Hamburger menu -->
      </div>
      
      <!-- Menus-->
      <ul class="home-navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
      </ul> 
      <!-- EO: Menus -->     
    </div>

    <!-- Content -->
    <header class="home-header">
        <div class="content">
            <h1>Test!</h1>
            <h2>Test test test</h2>
        </div>
    </header>
    <!-- EO: Content -->

    <!-- Footer -->
    <footer class="home-footer">
        <div>&copy; Acme 2021</div>
    </footer>
    <!-- EO: Footer -->
</body>
</html>