You have no idea how happy I am lol. CSS positioning will drive you crazy, you've simplified it wonderfully. I'll finally be able to easily center my header!
I finished learning HTML, got stuck on css, mostly the navbar. Watched a lot of videos but those dudes just show they know how to code and not actually teaching. But today i came across your video and i understood every thing...... i subscribed already, and gave a like. Thanks for this tutorial, looking forward for more on web design coding. Thanks once more...
Extremely helpful! I have become an avid viewer of your tutorials on HTML and CSS. Much appreciated. I am feeling much more confident after learning from your videos. Please keep doing more videos.
One of the BEST aspects of this marvelous tutorial is the use of developer tools. CSS positioning is inherently difficult at first, and the developer tools let you SEE each element's space/padding/alignment because the space is highlighted when you pass the cursor over the or , etc. Hence you see very quickly if you are in error, instead of not understanding why your change isn't working as expected.
great tutorial, I thank you. Please help me with 2 things 1. how to add an active class to highlight the current page 2. add a transition on the mobile menu collapse the best easy tutorial by far
Amazing work. I would like to know can we make the list items cover whole available space below the logo and hamburger. If phone is in landscape mode or portrait mode the list items should cover full screen. Can you please show how to achieve it, if possible a sequel to this video :)
Hmm, the inline-block doesn't change anything for me. Still a vertical list for me. Adding inline-flex under .nav-list only does make it a horizontal list. Not sure what's wrong.
So the navbar is not separate to the flex box, you are just stretching the nav bar - would have been good if the flex box was able to stretch and adjoined with the navbar.
You have no idea how happy I am lol. CSS positioning will drive you crazy, you've simplified it wonderfully. I'll finally be able to easily center my header!
Thank you so much, keep up the good work! 👍
I finished learning HTML, got stuck on css, mostly the navbar. Watched a lot of videos but those dudes just show they know how to code and not actually teaching.
But today i came across your video and i understood every thing...... i subscribed already, and gave a like.
Thanks for this tutorial, looking forward for more on web design coding.
Thanks once more...
I have never called anyone a master. But you are a bible and a dictionary. and I have subscribed.
thaks a lot!!!!because of your video i did a great job!!!
Extremely helpful! I have become an avid viewer of your tutorials on HTML and CSS. Much appreciated. I am feeling much more confident after learning from your videos. Please keep doing more videos.
One of the BEST aspects of this marvelous tutorial is the use of developer tools. CSS positioning is inherently difficult at first, and the developer tools let you SEE each element's space/padding/alignment because the space is highlighted when you pass the cursor over the or , etc. Hence you see very quickly if you are in error, instead of not understanding why your change isn't working as expected.
I wish u were my tutor in boot camp. Slick, clear & to the point, fantastic
thank you :)
if this didn't work for you, try changing the active class to display:none, worked for me thank you for such awesome content.
Top! I needed that. Works! Thanks!
Extremely helpful! Please keep doing more videos.
great tutorial, I thank you.
Please help me with 2 things
1. how to add an active class to highlight the current page
2. add a transition on the mobile menu collapse
the best easy tutorial by far
kullanici ismine bakmadan menu deyisinden turk oldugunu anladim. harikasin cem cok guzel bir video olmus eline saglik.
Exactly what I needed, straight to the point. Thanks!
Very informative, straight forward and clear explanation.
Bundle of thanks for this video ✨❤️
Привіт з України ! Дякую друже , це було круто , підписався на ваш канал , у вас багато цікавого для мене як початківця у справі програмування !
Слава Украïнi!
Great video, exactly what I needed. Thank you.
Thanks for this video! The best I've watched. It's so good❤😇
Oh wow, you are a good teacher. thanks for this, one more subscriber to the list
This is what I'm looking for! Thankyou so much! ❤️ You got a New sub here :)
Clear instruction andvery very informative! Great work!
Thank you so much, very clear explanations and nice to listen to!
HELP
When inputting the code below the lists does not inline block. I have the .
.nav-list .list-item {
display: inline-block;
}
i think it should be .nav-list li { display: inline-block; }
Thank you for teaching us the basics of a navbar! Great video Sir!
Thanks a lot for your video. Helped me a lot in my project.
Fantastic work and video ! Keep going !
Thank you! 😊
Thanks a lot, perfect tuto !
Nice tutorial! Thx!
hey i have a problem on the js part i did the dame thing but when i click it doesnt display the menu :(
can you help me
Amazing
Thank you so much for this❤
thanks🙏
You explain very clearly🤗 thanks
hello @cem eygi media tesekurler for your video, please im copying the same code by the display: inline-block; is not working for me
Amazing work. I would like to know can we make the list items cover whole available space below the logo and hamburger. If phone is in landscape mode or portrait mode the list items should cover full screen. Can you please show how to achieve it, if possible a sequel to this video :)
Thanks a lot dude. Great tutorial!
Such an amazing tutorial... Thanks a lot for this one.
Fabulous
nice work man,
thanks a lot,
Good and easy tutorial!
Thanks! :)
thankssss so much !!
wow awesome
When I click on the hamburger menu my list is not vertical, it remain horizontal but i put Display: block; how can i resolve it? Thank you :)
Amazing work Cem. Like always perfect !!!! ;) Cem to the moon ;) see ya my friend
Thank you so much for always being supportive! :)
How do I keep visual stuido code on top even when touching chrome, is there a way to have it always on top?
Excellent tutorial! Thank you for your time and good explanation.
Thanks brother
Hmm, the inline-block doesn't change anything for me. Still a vertical list for me. Adding inline-flex under .nav-list only does make it a horizontal list. Not sure what's wrong.
Hey, did you make sure you added the list-item class in each list item? I had the same problem and then realized I'm an idiot haha
so nice video. can you please explain me 16:56 how classList came there. thank you
Thank you :) That's a built-in JS property. See here for more: www.w3schools.com/jsref/prop_element_classlist.asp
i wish you could add animation to this opening navbar
which app are you using?
nice video sir!
please explain how to make logo and list item float to the corners?
He used the position elements in the video, you can cross check again
Thanks
So the navbar is not separate to the flex box, you are just stretching the nav bar - would have been good if the flex box was able to stretch and adjoined with the navbar.
GL bro
Hi!
May I ask what program you are using to code that has real time preview?
i use vs code and its live preview extension
Sir I have an error that is cannot read properties of null (reading ' addEventListener')
same
Nah, too
Merci pour ce tuto excellent.
J'ai une navigation dropdown multilevel mais pas en flexbox. je voudrais savoir si je dois aussi mettre le display flex au submenu ?
merci.
code:
@charset "UTF-8";
.navigation {V
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2581DC;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
Shouldn't that be inside header
niye türkçe konuşmuyon? yoksa bizi beğenmiyon mu
please give us your instagram id for further references,doubts and for clarification..
Thanks