0

I've created a responsive navbar. However, during iPad breakpoints, when you try to close the :active navbar by clicking the hamburger icon the jQuery script that is connected also implements .removeClass(".active").slideToggle() on the two buttons - which should stay there like they were before.

Just to clarify: On iPad breakpoints there is two buttons and a hamburger icon. When you click the hamburger icon to open the nav elements everything works as it should. However, when you then close the .nav-item:active elements the .nav-item btn elements also disappear and the whole thing messes up then.

Here is the code pen:

https://codepen.io/kingersnotepad/pen/YzVYVpp

Also, here is the HTML & jQuery:

<head>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(function() {
        $(".toggle").on("click", function() {
            if ($(".nav-item").hasClass("active")) {
                $(".nav-item").slideUp().removeClass("active");
        } else if ($(".ham1").hasClass("active") && $(".nav-item btn").hasClass("active") && $(".nav-item").slideUp().removeClass("active")) {
                $(".nav-item").slideUp().removeClass("active").not(".btn");
        } else {
                $(".nav-item").slideDown().addClass("active");
          }
        });
    });
   </script>
  
<head>
<body>
<nav>
    <ul class="nav-ul">
        <li class="logo"><img src="Assets/images/logo.PNG"></li>
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">Portfolio</a></li>
        <li class="nav-item"><a href="#">Blog</a></li>
        <li class="nav-item btn"><a href="#">Client Login</a></li>
        <li class="nav-item btn secondary"><a href="#">Book A Free Call</a></li>
        <li class="toggle">
                <svg class="ham ham1" viewBox="0 0 100 100" width="50" onclick="this.classList.toggle('active')">
                    <path class="ham-line top" d="m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272"/>
                    <path class="ham-line middle" d="m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272"/>
                    <path class="ham-line bottom" d="m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272"/>
                </svg>
        </li>
    </ul>
</nav>

& here is the CSS:

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

  nav {
    padding: 5px 20px;
    margin: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

 .logo img {
   height: 35px;
  }

  nav ul {
    list-style-type: none;
    width: 100%;
    border: none;
  }

  nav a {
    color: black;
    text-decoration: none;
  }

  nav a:hover {
    text-decoration: underline;
  }

  .nav-ul li:not(.toggle) {
    padding: 15px 5px;
    white-space: nowrap;
  }


    /* Navbar Hamburger */
  .toggle {
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .ham-line {
    fill:none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke:#000;
    stroke-width: 3;
    stroke-linecap:round;
  }

  .ham1 .top {
    stroke-dasharray: 40 172;
  }
  .ham1 .middle {
    stroke-dasharray: 40 111;
  }
  .ham1 .bottom {
    stroke-dasharray: 40 172;
  }
  .ham1.active .top {
    stroke-dashoffset: -132px;
  }
  .ham1.active .middle {
    stroke-dashoffset: -71px;
  }
  .ham1.active .bottom {
    stroke-dashoffset: -132px;
  }


  
  /* Mobile Nav */
  .nav-ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .toggle {
    order: 1;
  }

  .nav-item.button {
    order: 2;
  }
  .nav-item {
    width: 100%;
    text-align: center;
    order: 3;
    display: none;
  }
  .nav-item.active {
    display: block;
    overflow: hidden;
  }
  
  
  /* Tablet Nav */
  @media all and (min-width: 767px) {
    .nav-ul {
        justify-content: center;
    }
  
    .logo {
        flex: 1;
    }
  
    .nav-item.btn {
        width: auto;
        order: 1;
        display: block;
    }
    .toggle {
        order: 2;
    }
    .btn.secondary {
        border: 0;
    }
    .btn a {
        padding: 7.5px 15px;
        background: teal;
        border: 1px #006d6d solid;
        border-radius:50em;
    }
    .btn.secondary a {
        background: transparent;    
    }
    .btn a:hover {
        text-decoration: none;
        transition:all .25s;
    }
    .btn:not(.secondary) a:hover {
        background: #006d6d;
        border-color: #005959;
    }
    .btn.secondary a:hover {
        color: #ddd;
    } 
  }

  
  /* Desktop Nav */
  @media all and (min-width: 1024px) {
    .nav-item {
        display: block;
        width: auto;
    }
    .toggle {
        display: none;
    }
    .logo {
        order: 0;
    }
    .nav-item {
        order: 1;
    }
    .btn {
        order: 2;
        margin-left: 2px;
    }
    .nav-item:not(.btn) {
      margin-right: 20px;
    }
    .nav-ul li {
        padding: 15px 10px;
    }
    .nav-ul li.btn:not(.secondary) {
        padding-right: 0;
    }
  }

If anyone could recommend a fix that would be great.

Cheers

Samuel King
  • 1
  • 2

1 Answers1

0

The problem is that you are assigning the .active class to all your .nav-items which includes the two buttons you want to continue displaying.

Edit: I've Changed the code to fix the animation issue, let me know if you were looking for something else! (This doesn't seem to work in anything outside of codepen due to how the CSS is loaded).

HTML

added

    $(function () {
        $('.toggle').on('click', function () {
            if ($('.nav-item').hasClass('active')) {
                $('.nav-item:not(.btn)').slideToggle().removeClass('active');
            } else {
                $('.nav-item:not(.btn)').slideToggle().addClass('active');
            }
        });
    });

CSS (Under tablet breakpoint)

@media all and (min-width: 1024px) {
.nav-item {
    display: block !important;
    width: auto;
}

Checkout the codepen for full code although no other changes made https://codepen.io/Simar-Ubhi/pen/eYWyWWa?editors=1100.

Simar Ubhi
  • 1
  • 3
  • Hi there. Thanks for your contribution. I'm still having a few problems though. When I initially press "close" on the active navbar in iPad breakpoints, although it remains, it does .slideDown() briefly (the buttons). Also when you then switch into mobile breakpoints the .always-btn elements in the nav list are permenantly active. Your assistance would be greatly appreciated. Thanks – Samuel King Jul 26 '21 at 06:33
  • Hi I've made adjustments to fix the problem of the animation still happening. But could you clarify what buttons you want appearing on your mobile display, right now I have it as the 'Client Login' and 'Book A Free Call' buttons followed by the hamburger. When the hamburger is clicked your 'Home', 'Services', 'Portfolio', and 'Blog' buttons pop out. Are you wanting the 'Client Login' and 'Book A Free Call' buttons to only show when the hamburger is active? – Simar Ubhi Jul 26 '21 at 16:28
  • The issue only started when I began adding in the .slide() functions in jQuery. Please see this new codepen I created where everything is functional: https://codepen.io/kingersnotepad/pen/YzVYVpp. I just wanted some animation to it – Samuel King Jul 26 '21 at 22:12
  • Checkout the new answer I think it gives what you were looking for. Just be careful because it didn't seem to work for me outside of codepen. But if you just want to only use it in codepen it should be fine. – Simar Ubhi Jul 27 '21 at 01:26