Hi great job! However the code have some issues. Testing it on codepen and in my editor, when in mobile mode, when having more than one submenu and clicking the next sub menu it opens one of the links inside that submenu instantly. Also it would be nice to be able to close the submenus again on mobile, after opening it. Is this something you could fix on the codepen?
Great tutorial. But there is an issue. If we try to make header sticky/fixed menu overflow-y direction becomes problem child. I fixed that using overflow-y: auto in menu class in the media query. Is there is any other way to make this nav fixed?
Thanks for your comment. Only two steps required to make the navbar fixed both mobile and desktop: *1. First "header" element should be set to:* header{ position: sticky; top: 0; } *2. Second inside media query you will find the "header" element selector you will find position set to relative. Just remove this rule, you're all set.* 3. Finally, * inside media query max-width 50em* ...set the following rule: .menu{ overflow-y: scroll } And everything should work fine. Here's the demo: codepen.io/smashtheshell/pen/zYBWgPW
Hello, excellent work, I found a small error, when I am on a desktop pc and I reduce the window to less than 500 pixels so that the menu transforms to the mobile form, the menus and submenus appear, but when I try an option that It is under a menu that has submenus, you cannot reach those options because the window closes and returns to the main menu, how could I solve that, thanks
I found the solution, I split the .menu > li:hover > a + .subm..... rule and change the position depending on whether it is menu or submenu, like this: .menu > li:hover > a + .submenu { position: relative; } .submenu > li:hover > a + .submenu { position: absolute; }
@@powerlinksec if possible can u explain this to me a lil. I didn't get how by setting there position attributes disables the click on the menu links and prevents the page to redirect to the main page
Hello again, I sent a comment before and I managed to solve it, I also included the solution in an answer, but now I don't know how to solve this problem, I hope you can help to solve it, I will explain, when I open the site on the web with a desktop pc , everything works perfectly, but when opening the site on the mobile when the menu is expanded, everything is correct, when expanding the submenu, it opens but the first option is automatically executed, there is no way to select the second, third or others below, it you can do it by holding down on that option, but the browser asks if I want to open the link in a new window, etc., I close that window and there you can choose the second, third or other option. I hope you have made me understand for the rest, the menu works correctly. Thanks again.
I copied the php code from codepen.io/smashtheshell/pen/zYBWgPW and I tried it on my computer. why the UI / UX Design menu cannot be selected when in responsive / mobile mode. thank you, i really helped with this lesson
Thank you for such an amazing video and for free too. When styling the .submenu .submenu .submenu {left: -100%;} I do .submenu .submenu .submenu{ right:100%; } Am I making a mistake here because what you did is you go for .submenu and add min-width of 22em?
Wow! Just what I was looking for. Thank you! Thank you! Thank you!
AWSOME!!!! It took me a while but it worked at the end!!!
You are a life saver! Thank you!
Happy to help!
its just what a i needed, thanks for your time!
liked and subscribe sir...thank you
Subscribed bro, tq for Lighting lamp In my darkness
thanks for course but i have got a question for you, how to make a slide menubar in responsive like for amazone without a burger thanks
Hi great job!
However the code have some issues.
Testing it on codepen and in my editor, when in mobile mode, when having more than one submenu and clicking the next sub menu it opens one of the links inside that submenu instantly.
Also it would be nice to be able to close the submenus again on mobile, after opening it.
Is this something you could fix on the codepen?
Thank you very much, very good and helpful tutorial.
Thanks 😊
thank you
Great tutorial. But there is an issue. If we try to make header sticky/fixed menu overflow-y direction becomes problem child. I fixed that using overflow-y: auto in menu class in the media query. Is there is any other way to make this nav fixed?
Thanks for your comment. Only two steps required to make the navbar fixed both mobile and desktop:
*1. First "header" element should be set to:*
header{
position: sticky;
top: 0;
}
*2. Second inside media query you will find the "header" element selector you will find position set to relative. Just remove this rule, you're all set.*
3. Finally, * inside media query max-width 50em* ...set the following rule:
.menu{
overflow-y: scroll
}
And everything should work fine.
Here's the demo:
codepen.io/smashtheshell/pen/zYBWgPW
@@smashtheshell That is what I done 😁.
Well, that's awesome 😍
Hello, excellent work, I found a small error, when I am on a desktop pc and I reduce the window to less than 500 pixels so that the menu transforms to the mobile form, the menus and submenus appear, but when I try an option that It is under a menu that has submenus, you cannot reach those options because the window closes and returns to the main menu, how could I solve that, thanks
I found the solution, I split the .menu > li:hover > a + .subm..... rule and change the position depending on whether it is menu or submenu, like this:
.menu > li:hover > a + .submenu {
position: relative;
}
.submenu > li:hover > a + .submenu {
position: absolute;
}
@@powerlinksec if possible can u explain this to me a lil. I didn't get how by setting there position attributes disables the click on the menu links and prevents the page to redirect to the main page
Hello again, I sent a comment before and I managed to solve it, I also included the solution in an answer, but now I don't know how to solve this problem, I hope you can help to solve it, I will explain, when I open the site on the web with a desktop pc , everything works perfectly, but when opening the site on the mobile when the menu is expanded, everything is correct, when expanding the submenu, it opens but the first option is automatically executed, there is no way to select the second, third or others below, it you can do it by holding down on that option, but the browser asks if I want to open the link in a new window, etc., I close that window and there you can choose the second, third or other option. I hope you have made me understand for the rest, the menu works correctly. Thanks again.
Kindly provide the direct link of the source code , i am unable to find it .
Nice explanation btw :)
Here you go:- codepen.io/smashtheshell/pen/zYBWgPW
Thanks for your appreciation 😊
I copied the php code from codepen.io/smashtheshell/pen/zYBWgPW and I tried it on my computer. why the UI / UX Design menu cannot be selected when in responsive / mobile mode.
thank you, i really helped with this lesson
Hey, I'll look at it and get back to you soon 😊
Thank you for such an amazing video and for free too. When styling the
.submenu .submenu .submenu {left: -100%;}
I do
.submenu .submenu .submenu{
right:100%;
}
Am I making a mistake here because what you did is you go for .submenu and add min-width of 22em?