Kevin Powell - Community•3mo ago

How to solve responsive navbar issue

Hello guys, I was creating responsive navbar and I get stucked. I encountered a problem while creating a responsive navbar. Specifically, I faced difficulties when trying to show the menu smoothly upon clicking the hamburger icon. Additionally, I implemented a feature where the header disappears as I scroll down 80px, which is working well. However, I would like the header to remain visible when the hamburger icon is clicked. https://codepen.io/artbymali/pen/VwNNVgG?editors=0100

6 Replies

muhammadali770•3mo ago

I just tried and first problem is solved which is smoot opening of rest of menu and now is only 2 issue

MarkBoots•3mo ago

i didnt go through all of your code, but when you check if the header must dissapear on scroll, you can also check if the menu is openened here you only hide it when the menu is not open

const menuOpen = document.querySelector('.menu_left').classList.contains("menu--open");
if (scrollTop > lastScrollTop && !menuOpen){
  ...
}

const menuOpen = document.querySelector('.menu_left').classList.contains("menu--open");
if (scrollTop > lastScrollTop && !menuOpen){
  ...
}

muhammadali770•3mo ago

Actually, what I am saying is it possible that when I click on the hamburger icon, the header does not move if I scroll down 80px, the header should stay in its place until I click on it again.

MarkBoots•3mo ago

yea it works like that line 8 and 9 are the only things i've added/adjusted

MarkBoots•3mo ago

muhammadali770•3mo ago

Wow thanks bro

Gaming

Programming

How to solve responsive navbar issue