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
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.
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?
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 !!!
oh my God thanks man you really just saved my life
You're welcome 💙
You are the best, I support you
Your all tutorials are so helpful
Glad you like them!
Perfect - the video I was looking for. Thankyou for uploading
I really liked watching the video and your video solved my problem
thanks
You're welcome 💙
It is fantastic dude.....
Thank you... Keep watching ❤️
bro. I appreciate your work. Very nice. Thanks bro for the tutorial. Keep it up for more video.
You're welcome bro 💙
brother u have stunning content in channel, i really like that stuff..
Thank you 💙
Follow us on insta - instagram.com/coding.np
Awesome 👍
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
Very nice effect 👌👌👌 I like it !
Thank you.. Keep supporting ❤️
how can i keep the menu highlighted when it's active?
Facing the same problem
Add "active" attribute
Very nice! Thanks! 🤗🤗🤗
Your 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 - ua-cam.com/video/tcskp-ncN0I/v-deo.html
Excellent 👌
Thank you 💙
thanks bro for saving my time
great Video!
Thank you 💙
Superb...🥹🥹🥹 u .. r suprb teacher.... sir /ma'am.....🥹🥹🥹🥹🥹🥹🥹🥹 tq so much....
Thank you bro 🙏
I've always got the best from you
Thanks please
Always welcome
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.
Thanks😍😍😍
Welcome 😊
Thank you, so beautiful
thanks buddy ❤️
You're welcome 💙
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 only see "start_home," huhu can u help me know it?
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
cool i love that
Thank you 💙
how can I do this with a dynamic links option.... for example, I don't know if I would use 4 links or 10links-
How to do the same in case of active element state?
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.
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.
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
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.
Amazing
Nice tutorial
You are awesome coder if I use your coding it's ok for you
Yes you can use my code.
Inline block aur flex me jya difference h aur inline block kab kab use krna hota h
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.
Thank you .
Nice
Is it possible to make this responsive ?
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.
the bottom 0, or second animation. What does it call?
Please mention time.
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
how does it behave in responsive view?
It's not responsive.
can you make a video about your work
Great
Thank you :)
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.
Which software you have used to make such kind of video tutorial?
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.
Thnx!
why didn't you use flex for your nav?
thanks
You're welcome... Stay tuned 😁
@@CodingNepal Thank you, I've been watching from Turkey got me very useful video
can someone explain me the "start-home" is used for what
how to hyperlink on section html?
@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.
i cant find the source code
good but it isn't responsive it is just static values
Yes it's not responsive.
How can we put a tab on top ?
Is this a CSS tutorial or a music video?
good
someone know how to add clear custom css to elementor?
Those css are hardcoded and will not scale if we add another a tag in html
why u used start-home class? IDK For what?
What is the name of the editor
It's atom.
Hover is not at all working
Help me pleae3
nice
i couldn't find the code. Someone help me pls
www.codingnepalweb.com/2020/06/active-tab-hover-animation-with-icons.html
that will work just with these tabs , but if you add another tab it will not work .
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??
what if a link text is longer than 100px
wow
Thank you 💙
please how to make it responsive !?
Hi ,I need code file plz . 🙂
Contact on me Instagram
Do not show the @import url full name.
can i use your code?
Yes you can.
daju malai please help gardinus tapai ko number dinnu hoss ma wattsapp garxu tapailai
I do not use whatsapp.
Source Code ? ?
advanced tutorial
Terrible code
Nice