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
The problem is that you are assigning the
.activeclass to all your.nav-itemswhich 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
CSS (Under tablet breakpoint)
Checkout the codepen for full code although no other changes made https://codepen.io/Simar-Ubhi/pen/eYWyWWa?editors=1100.