Hi! how could the code run the nav .start-blog tag? While you only specify the start-home tag only. Or it's only will be used for further JS or JQuery purpose? Thank you!
he is saying that in html file you only define class as. start-home but in css file you use. start-home start-blog etc without defining them in html file
that looks cool, i tried it out. however, there are a lot of repetitions with nth-child() and hover effects for each of them individually. is there any simpler way to achieve this with java script?
Hello there! Love this tutorial. If I have only 4 tabs, the hover will dislocate? How do I change that? Can I maybe DM you. Currently working on my exam project, and would love this hover menu bar.
According to this design, the active page is home page and when you hover on other menu the animation slides smoothly and it go to default active tab when the pointer out. I hope you got it.
Brother I write the whole code and try to make same to understand his working for practice mode but I realised some code is missing of HTML file in this video can you please share his HTML. Code so I can check and correct my mistakes.
brothur could you please make a voice over in this tutorial? please that would be very much helpful. i want to know , { :hover~.animation} "~" why this sign? can you please explain love from Bangladesh.
Hi! how could the code run the nav .start-blog tag? While you only specify the start-home tag only. Or it's only will be used for further JS or JQuery purpose? Thank you!
I didn't understand.. Can you tell me im details?
he is saying that in html file you only define class as. start-home but in css file you use. start-home start-blog etc without defining them in html file
Sorry it was my mistake. Here is the actual CSS codes -
@import url('fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
font-family: 'Open Sans', sans-serif;
background: #2c3e50;
}
nav{
position: relative;
margin: 270px auto 0;
width: 590px;
height: 50px;
background: #34495e;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}
nav a{
font-size: 15px;
text-transform: uppercase;
color: white;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
}
nav .animation{
position: absolute;
height: 100%;
/* height: 5px; */
top: 0;
/* bottom: 0; */
z-index: 0;
background: #1abc9c;
border-radius: 8px;
transition: all .5s ease 0s;
}
nav a:nth-child(1){
width: 100px;
}
nav .start-home, a:nth-child(1):hover~.animation{
width: 100px;
left: 0;
}
nav a:nth-child(2){
width: 110px;
}
nav a:nth-child(2):hover~.animation{
width: 110px;
left: 100px;
}
nav a:nth-child(3){
width: 100px;
}
nav a:nth-child(3):hover~.animation{
width: 100px;
left: 210px;
}
nav a:nth-child(4){
width: 160px;
}
nav a:nth-child(4):hover~.animation{
width: 160px;
left: 310px;
}
nav a:nth-child(5){
width: 120px;
}
nav a:nth-child(5):hover~.animation{
width: 120px;
left: 470px;
}
This is actually what I was looking for - thank you !!!
You are the best, I support you
Your all tutorials are so helpful
Glad you like them!
oh my God thanks man you really just saved my life
You're welcome 💙
I really liked watching the video and your video solved my problem
thanks
You're welcome 💙
Perfect - the video I was looking for. Thankyou for uploading
It is fantastic dude.....
Thank you... Keep watching ❤️
how can i keep the menu highlighted when it's active?
Facing the same problem
Add "active" attribute
bro. I appreciate your work. Very nice. Thanks bro for the tutorial. Keep it up for more video.
You're welcome bro 💙
Very nice! Thanks! 🤗🤗🤗
Your welcome 💙
Very nice effect 👌👌👌 I like it !
Thank you.. Keep supporting ❤️
thanks bro for saving my time
Awesome 👍
Thank you 💙
brother u have stunning content in channel, i really like that stuff..
Thank you 💙
Follow us on insta - instagram.com/coding.np
Thank you bro 🙏
I've always got the best from you
Thanks please
Always welcome
In the next video can you make a responsive website using html and css
(and thanks for give me two hearts)
Here is the video - ruclips.net/video/tcskp-ncN0I/видео.html
Thanks😍😍😍
Welcome 😊
Superb...🥹🥹🥹 u .. r suprb teacher.... sir /ma'am.....🥹🥹🥹🥹🥹🥹🥹🥹 tq so much....
Excellent 👌
Thank you 💙
I luv ur content ❤ u r very creative. keep it up. I think u should start teaching us. It will be very helpful.
Thank you 💙
This is teaching lmao
@@CodingNepal yw
why does the underline return back to its starting position, can you change it?
you must remove the .start-home, but you'll have the selector render only when hovering something
I would like to ask you something, why is not closed??
in the nav, I have and I can´t close it and the whole animation and css breaks
thanks buddy ❤️
You're welcome 💙
How to do the same in case of active element state?
that looks cool, i tried it out. however, there are a lot of repetitions with nth-child() and hover effects for each of them individually. is there any simpler way to achieve this with java script?
I also face same issue did you find this problem solution please let me know
Hello there! Love this tutorial. If I have only 4 tabs, the hover will dislocate? How do I change that? Can I maybe DM you. Currently working on my exam project, and would love this hover menu bar.
Thank you, so beautiful
I only see "start_home," huhu can u help me know it?
how can I do this with a dynamic links option.... for example, I don't know if I would use 4 links or 10links-
nav{
position: relative;
margin: 270px auto 0;
width: 590px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
}
In this above code why did you write ' font-size:0 ' can anyone explain
It's mean if the nav has taken any font-size then make it 0; It's not required and you don't need to put this line.
Great video! How do you make the highlight effect stay active when you click on a nav element? Thank you
Use javascript for that.. I've made many videos on it.. Visit channel.
How about something dynamic? Because majority of cases are dynamic content, thats why static width not always the solution.
If you have some knowledge of css then you can put dynamic width or static width according your desire.
can you make a video about your work
how can i make it to go back to the current page one i take the mouse pointer out
According to this design, the active page is home page and when you hover on other menu the animation slides smoothly and it go to default active tab when the pointer out. I hope you got it.
Is it possible to make this responsive ?
Which software you have used to make such kind of video tutorial?
Inline block aur flex me jya difference h aur inline block kab kab use krna hota h
the bottom 0, or second animation. What does it call?
Please mention time.
Brother I write the whole code and try to make same to understand his working for practice mode but I realised some code is missing of HTML file in this video can you please share his HTML. Code so I can check and correct my mistakes.
Source files link is in the description.
SUPER!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! SUPER!!!!!!!!!!!!!!!! SUPER!!!!!!!!!
Thank you :)
Please continue these lessons !!! Thanks a lot!!!!!
Hello brother ! Can you tell me how to make this animation on drop-down? I do like that but not working.
what is the url in style .css
This url is used for font-family.. You can get code files from here drive.google.com/file/d/1aURPkqJP6ASxBsLHozPEdn3oYJPCetMD/view?usp=drivesdk
Hello, how can I do that when I restart the web, the colored button start in "contact", and not un "Home"?
New sub 😄
use Javascript or JQuery..
@@CodingNepal IT is posible to do it with css?
@@ElSuperNOOB No there is no page reload event listener in CSS.
@CodingNepal could you please tell me how to active this in the last child??
You need to do some change in css codes. Contact on me Instagram. I'll do for you.
good but it isn't responsive it is just static values
Yes it's not responsive.
i cant find the source code
can someone explain me the "start-home" is used for what
great Video!
Thank you 💙
how does it behave in responsive view?
It's not responsive.
cool i love that
Thank you 💙
why didn't you use flex for your nav?
Thank you .
Nice tutorial
You are awesome coder if I use your coding it's ok for you
Yes you can use my code.
Is this a CSS tutorial or a music video?
What is the name of the editor
It's atom.
Hover is not at all working
Help me pleae3
How can we put a tab on top ?
Those css are hardcoded and will not scale if we add another a tag in html
how to hyperlink on section html?
thanks
You're welcome... Stay tuned 😁
@@CodingNepal Thank you, I've been watching from Turkey got me very useful video
Thnx!
why u used start-home class? IDK For what?
someone know how to add clear custom css to elementor?
Amazing
brothur could you please make a voice over in this tutorial? please that would be very much helpful.
i want to know , { :hover~.animation} "~" why this sign? can you please explain
love from Bangladesh.
This article helps you - techbrij.com/css-selector-adjacent-child-sibling
@@CodingNepal ok , and could you please tell me how to active this in the last child??
i couldn't find the code. Someone help me pls
www.codingnepalweb.com/2020/06/active-tab-hover-animation-with-icons.html
what if a link text is longer than 100px
please how to make it responsive !?
that will work just with these tabs , but if you add another tab it will not work .
can i use your code?
Yes you can.
Great
Thank you :)
Hi ,I need code file plz . 🙂
Contact on me Instagram
Nice
Do not show the @import url full name.
good
nice
Source Code ? ?
advanced tutorial
daju malai please help gardinus tapai ko number dinnu hoss ma wattsapp garxu tapailai
I do not use whatsapp.
wow
Thank you 💙
Terrible code
Nice