Responsive Dropdown Menu Bar with HTML & CSS | CodingNepal

Поділитися
Вставка
  • Опубліковано 27 лис 2024

КОМЕНТАРІ • 226

  • @CodingNepal
    @CodingNepal  4 роки тому +20

    If your icons aren't showing, replace the line no.8 script of index.html with this:

    • @CodingNepal
      @CodingNepal  3 роки тому +4

      If icons are not showing then replace the line.no 8 with this

    • @luisenrique2329
      @luisenrique2329 2 роки тому

      @@CodingNepal thanks !!

  • @aakash2939
    @aakash2939 3 роки тому +7

    Feels really good to see a Nepali coder at the top of my search result

    • @CodingNepal
      @CodingNepal  3 роки тому +1

      Glad to hear that...Stay tuned with us :)

  • @ertugrulsaka1193
    @ertugrulsaka1193 4 роки тому +8

    i'm watching video while listening pantera, and dude.. this is an awesome tut. i'm beginner at css and learning a lot of thing with these videos and also having fun!
    thank you so much

  • @riemann9412
    @riemann9412 2 роки тому

    Nepali bhaiya ne toh bilkul aag lga di !

  • @danielvicens9931
    @danielvicens9931 3 роки тому +2

    Stunning videos... Stunning videos... Thank you for taking the time to make them... a strong embrace from Argentina...

  • @dipankarkumarsingh
    @dipankarkumarsingh 3 роки тому +2

    thanks ... from India bro 😊

  • @bloodshotgamingff
    @bloodshotgamingff 4 роки тому +3

    very nice fantastic......waiting for upcoming part..

  • @aditya._.official
    @aditya._.official 4 роки тому +2

    Waao Amazing 👍 waiting for other parts

  • @hoaxdev
    @hoaxdev 3 роки тому +2

    Thank you! This has helped me a lot!

  • @nss8768
    @nss8768 3 роки тому +1

    Thank you CodingNepal.

  • @sebatecning5207
    @sebatecning5207 4 роки тому +3

    Excelente aporte, gracias por compartir este tipo de material, me ha gustado mucho, saludos desde Colombia

    • @CodingNepal
      @CodingNepal  4 роки тому

      English please

    • @sebatecning5207
      @sebatecning5207 4 роки тому +1

      @@CodingNepal I am sorry, I speak very little the English.
      Translator👇🏻👇🏻👇🏻
      Excellent contribution, thanks for sharing this type of material, I really liked it, greetings from Colombia. You already have a new subscriber 😊

    • @CodingNepal
      @CodingNepal  4 роки тому +1

      Thank you bro for loving my videos... Keep watching 💙

  • @gevorghambardzumyan2375
    @gevorghambardzumyan2375 2 роки тому +1

    I love when every last one of this kind of tutorial creates this component for ideal condition
    what if your menu is on the left side of the screen and you have a sub-menu under the last menu button. then what? we will hope that no one will ever want to open it or that every user who wants should be familiar with HTML/CSS

  • @mikami9921
    @mikami9921 3 роки тому

    CodingNepal, Thank you very much for these 2 videos. I now have a responsive navigation bar. I really admire how you guys come up with these codes. I wish I was that smart hahahahaha.

  • @МатьРоссия-щ3я
    @МатьРоссия-щ3я 4 роки тому +1

    I learned a lot by watching your videos +subscribed

  • @aroomafoods2483
    @aroomafoods2483 2 роки тому

    Best codding sir

  • @videoeditor2837
    @videoeditor2837 2 роки тому

    Thanks a lot bro you are helping us lot of in css 3

  • @rajbannasa7662
    @rajbannasa7662 3 роки тому +1

    Thank you so much sir ❤️

  • @vuongqtvn
    @vuongqtvn 3 роки тому

    many thank very useful for me

  • @ennavazhkada5844
    @ennavazhkada5844 4 роки тому +2

    Very cool and like you background music..😊

  • @manikmadhavhalder6279
    @manikmadhavhalder6279 4 роки тому +1

    Very nice video sir....

  • @vedantvidhani3343
    @vedantvidhani3343 3 роки тому

    So close to 100k!

  • @LordKing13
    @LordKing13 3 роки тому +2

    Dude I LOVE YOU!!!!!!!!!!! THANK YOU SO MUCH!

  • @BrunoFilho
    @BrunoFilho 3 роки тому +1

    Nice project bro, you're good!

  • @rsk2002
    @rsk2002 4 роки тому +2

    amazing bro, waiting for responsive part

    • @CodingNepal
      @CodingNepal  4 роки тому +1

      Video already published watch now - ua-cam.com/video/1NC8G_zWDJY/v-deo.html

  • @ManiBssProduction
    @ManiBssProduction 4 роки тому +1

    Ah thank you, that's what I was looking for

    • @CodingNepal
      @CodingNepal  4 роки тому

      You're welcome 💙

    • @emmanuelekwere9198
      @emmanuelekwere9198 3 роки тому

      @@CodingNepal please help me. My fa fa-plus not showing the plus icon. Thanks.

  • @aakashsingh7391
    @aakashsingh7391 2 роки тому

    Awesome bro.. nice to c u coming this far ❤️❤️

  • @soumyajitdatta9203
    @soumyajitdatta9203 4 роки тому +1

    Thank you...its a great help to me.

  • @buddywuthebt8024
    @buddywuthebt8024 3 роки тому +1

    thanks a lot i appreace it

  • @kalikacomputerinstitute1625
    @kalikacomputerinstitute1625 4 роки тому +1

    Carry on daajai

  • @pufu3622
    @pufu3622 4 роки тому +1

    Love you man. A great menu

  • @snehapawar672
    @snehapawar672 4 роки тому +1

    superb

  • @emonshorif6479
    @emonshorif6479 4 роки тому +3

    Awesome

  • @greninja1911
    @greninja1911 3 роки тому +1

    Thanks

  • @programmingtechno1577
    @programmingtechno1577 4 роки тому +1

    Nice video dude

  • @samilaferreira5658
    @samilaferreira5658 4 роки тому +1

    Thank you so much!

    • @CodingNepal
      @CodingNepal  4 роки тому +1

      You're welcome.. Stay tuned 😁

  • @daidandy
    @daidandy 4 роки тому +3

    wow ,good man

  • @xhaiii
    @xhaiii 3 роки тому

    Everytime im making css "THIS SHOULD WORK"

  • @NguyenHoang-sq3kz
    @NguyenHoang-sq3kz 4 роки тому +1

    great video

  • @SimpleSubash
    @SimpleSubash 4 роки тому +2

    Love the content

  • @kittoeebenezer7067
    @kittoeebenezer7067 Місяць тому

    Thank you

  • @divankersaxena3809
    @divankersaxena3809 4 роки тому +1

    Fantastic work !!!!
    And Thank you..

  • @ollicom
    @ollicom 4 роки тому +1

    Fantástic!!!
    Im tô Brazil!

  • @akirayagi5111
    @akirayagi5111 3 роки тому +1

    Its not applicable in practice brother Css visible property still takes up space
    But it was a good video if your taking about using only Css to get used to the properties in it.

  • @rashmitasahoo9761
    @rashmitasahoo9761 3 роки тому

    Best Video

  • @ManojKumar-vq2pv
    @ManojKumar-vq2pv Рік тому

    Nice video. Which browser extension is used here?

  • @oa-a1-training
    @oa-a1-training 2 роки тому

    i love this

  • @christoferi9636
    @christoferi9636 3 роки тому

    you are very good :D
    turn down the music volume pleaaaaaaaaaaaaaaaaaaaaaaase

  • @nageswarkv
    @nageswarkv 3 роки тому +2

    I think this is not right way to do menu bar using float these days. It seems using float & display:inline-block contradicts and ignores float while using display inline-block

    • @Acesif
      @Acesif 2 роки тому +1

      True, float has become outdated nowadays

    • @szymonciesla6413
      @szymonciesla6413 2 роки тому

      exactly, same noticed but anyway great video ;)

  • @GAMEKILLER-k4d
    @GAMEKILLER-k4d 3 роки тому +2

    You Super 💕😘

  • @nguyenkhang3050
    @nguyenkhang3050 4 роки тому +4

    Very cool ! Can you upload this project and give me link to download ?

    • @CodingNepal
      @CodingNepal  4 роки тому +3

      I'll provide source code download link tonight or maybe tomorrow. Please keep patience.

    • @ztecinstitute6102
      @ztecinstitute6102 4 роки тому

      ua-cam.com/video/-eghPC-mpbo/v-deo.html

  • @snehapawar672
    @snehapawar672 4 роки тому +1

    If i add slider below navigation, the dropdown is not working properly. I can see the dropdown list but unable to click the dropdown options. Please help.

    • @CodingNepal
      @CodingNepal  4 роки тому

      Please contact me on Instagram.

  • @binkositideslors1491
    @binkositideslors1491 3 роки тому

    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

  • @SHAHIDKHAN-ks6tv
    @SHAHIDKHAN-ks6tv 3 роки тому +1

    music?
    BTW lots Of love from bhairahawa,nepal

  • @thug_gamer315
    @thug_gamer315 3 роки тому

    Bro which tool u use for html coding plz reply

  • @VigneshVicky-fg9sl
    @VigneshVicky-fg9sl 4 роки тому +1

    In this nav bar position is not fixed. If I fix the same, menu is going to the left but I want it should be right aligned. How to fix this issue. Help me out

    • @CodingNepal
      @CodingNepal  4 роки тому

      Please contact me on Instagram.

  • @luzvieabrique5097
    @luzvieabrique5097 4 роки тому +4

    May i know the full link located above the css file cause i wanna try this tutorial but can't see the full details of the link. Thanks

    • @CodingNepal
      @CodingNepal  4 роки тому

      Check this part 2 video description. I've mentioned source code download link.

    • @ahmedch6633
      @ahmedch6633 4 роки тому

      @@CodingNepal No source code mentioned anywhere ! ! !

    • @khosyzufarannaafi5342
      @khosyzufarannaafi5342 4 роки тому

      @@ahmedch6633 Click download link and you scroll until bottom

  • @anthonyhanson4995
    @anthonyhanson4995 3 роки тому

    Hello: I've been following your video up to the nav ul li a:hover. I've followed the color codes like you instructed. But, my box-shadow isn't working. Can you help me?
    Thanks!!

  • @gerdahtsaryna7485
    @gerdahtsaryna7485 4 роки тому +2

    why is that when i change the text to a longer text in the dropdown, the text goes down instead of going vertically? Please help me

    • @CodingNepal
      @CodingNepal  4 роки тому +2

      Inside css media query you need to change the font size of text according to the device width. If you can't do it contact me on Instagram and I will do it for you.

  • @abhishekmagar9843
    @abhishekmagar9843 4 роки тому +1

    which codeeditor you use

    • @CodingNepal
      @CodingNepal  4 роки тому

      Here is the video of my text editor - ua-cam.com/video/55VjXTeYkTE/v-deo.html

  • @pulkitvermaaa
    @pulkitvermaaa 3 роки тому

    Sir , Please Make a complete Website with drop down menu

  • @shankaryoyo8881
    @shankaryoyo8881 4 роки тому +1

    Hi
    Why isn't it getting applied,when I change it to my phone ?
    I have linked tablet, phone and desktop css pages to my html. I copied this code exactly to all those css pages. It works well on desktop, working good on tablet to some extent but fails when minimize to phone why brother ?
    Plus it's list shows in separate blocks else from vertical drop down

    • @CodingNepal
      @CodingNepal  4 роки тому

      Can you show me the screenshot of problems on my Instagram account... Link in the description

    • @shankaryoyo8881
      @shankaryoyo8881 4 роки тому

      @@CodingNepal I sorted brother. Thank you so much. Your codes are just awesome. Please upload for e-commerce websites and other applications

  • @revanth9272
    @revanth9272 3 роки тому +1

    how did you learnt all these, I am not talking about this dropdrown menu. I just visited your blogs on php, xampp. I want to learn all these by step by step. Can you help me..!!

    • @CodingNepal
      @CodingNepal  3 роки тому +1

      Why not.? You can contact me on Instagram.

    • @revanth9272
      @revanth9272 3 роки тому

      @@CodingNepal sure👍

  • @eightcoins4401
    @eightcoins4401 4 роки тому +1

    Im working in Dreamweaver ant cant remove Blue Markings when hovering

  • @winter3410
    @winter3410 4 роки тому +1

    im added a slider below this menu bar but the dropdown appears behind my slider. how do i make the dropdown appear in front of everything else?

    • @CodingNepal
      @CodingNepal  4 роки тому

      Add this code
      nav{
      position: relative;
      z-index: 999;
      }

    • @winter3410
      @winter3410 4 роки тому +1

      @@CodingNepal thanks for the fast reply but it doesnt work when i put it into my css file. nothing seems to happen when i put that code in

    • @CodingNepal
      @CodingNepal  4 роки тому

      If your problem still not solved send me your code on my Instagram.

    • @winter3410
      @winter3410 4 роки тому

      @@CodingNepal can you reply to me on instagram i sent you a message

    • @eurowindowhochiminh7478
      @eurowindowhochiminh7478 4 роки тому

      Me too

  • @emmanuelekwere9198
    @emmanuelekwere9198 3 роки тому +1

    Can anyone help. The plus icon not showing here.

    • @CodingNepal
      @CodingNepal  3 роки тому

      You may not connected to the Internet

  • @kelseyburger
    @kelseyburger 4 роки тому +1

    I have to click on the buttons to get them to glow and also my drop down menu does not work. please help :(

    • @CodingNepal
      @CodingNepal  4 роки тому

      Please recheck your codes otherwise you can download code files of this tutorial from description link.

  • @christianearlreed8310
    @christianearlreed8310 3 роки тому +1

    please can u make a video adding another drop down menu? but same as this html and css? i dont know how to add

    • @CodingNepal
      @CodingNepal  3 роки тому +1

      Watch this - ua-cam.com/video/_IHxhJlIPZA/v-deo.html

  • @peace9266
    @peace9266 3 роки тому +1

    Can i use this in mobile Format bootstrap

  • @sherendurraniofficial9376
    @sherendurraniofficial9376 4 роки тому +1

    You gave above link source code bro always give the page url compelet where your code exist so that we may easily copy that it is difficult to find it. Thanks!

    • @CodingNepal
      @CodingNepal  4 роки тому

      If i do this.. Maximum my viewers only go to my website to get the codes of particular tutorial and after getting the codes they immediately exit from my website and it's increase the bounce rate of my website which is not good so I don't do this..

    • @CodingNepal
      @CodingNepal  4 роки тому

      If I don't give the direct link of source codes.. First they go to my website then search the tutorial and get the codes.. With this method they spend some times on my website which helps me to maintain my website bounce rate.

  • @adamvanhorn5328
    @adamvanhorn5328 3 роки тому +1

    The amount of ads absolutely kills me.

  • @cguniverse3919
    @cguniverse3919 4 роки тому +1

    Bro can you tell which text editor are using to code?

  • @imrantharadra
    @imrantharadra 4 роки тому +1

    nav:after{
    content ‘ ‘;
    clear: both;
    display: table;
    }
    //Can someone explain why this was written, failed to understand the purpose of this part :(
    TIA🙏

    • @CodingNepal
      @CodingNepal  4 роки тому +2

      The “clear: both” means floating the elements are not allowed to float on both sides. It is used when no need of any element float on the left and right side as related to the specified element and wanted the next element only shown below. It also indicates that no other element takes up space on the left and right side.

    • @CodingNepal
      @CodingNepal  4 роки тому +2

      Display: block; will extend to 100% of the available space, while display: table; will only be as wide as its contents.

    • @CodingNepal
      @CodingNepal  4 роки тому +2

      If you don't understand.. You can try with removing this codes from the css file and see what changes in the design.

  • @gouravnishad4057
    @gouravnishad4057 4 роки тому

    Sir
    Hum Janna chahte hai
    Ki aapne kitne dino me HTML CSS and JavaScript Sikh liya
    Please sir
    If you watch this comment
    Then, please answer

    • @CodingNepal
      @CodingNepal  4 роки тому

      Mene 2 saal pehele siknaa suru kiya tha... Abhi bhi sik rahahu.

  • @saisrisurangi2337
    @saisrisurangi2337 4 роки тому +1

    .show,.icon, input {
    display: none;
    }
    this code is effected in contact form inputs are not showing. how can i modify this code to display the inputs?

    • @CodingNepal
      @CodingNepal  4 роки тому

      Give a class name to input tag and style it.

    • @saisrisurangi2337
      @saisrisurangi2337 4 роки тому

      @@CodingNepal tq it's working...

    • @sumitk640
      @sumitk640 4 роки тому

      Sir tell me one think .
      What is better responsive for blogger.
      Only use HTML or With java.

  • @Michael-vc1ky
    @Michael-vc1ky 3 роки тому

    how to change the background color to background image on navigation bar?

  • @neeekomancer
    @neeekomancer 4 роки тому +1

    how to make this sticky ?? when i created slideshow , i cant click my navi now also

    • @CodingNepal
      @CodingNepal  4 роки тому

      Here is the video - ua-cam.com/video/UHSeFxZIuv8/v-deo.html

  • @Spiffer
    @Spiffer 3 роки тому +1

    The Display: inline-block is being ignored in nav ul li due to the float:left?

  • @sandrostupid7602
    @sandrostupid7602 2 роки тому

    can I make dropdown without navbar

  • @thebackbancher07
    @thebackbancher07 2 роки тому

    sir code is not available on you website plz upload it

  • @josecabezas7341
    @josecabezas7341 4 роки тому +1

    the source is not found in the link given up.
    there are many navs menu but this one

    • @CodingNepal
      @CodingNepal  4 роки тому

      Here is the direct codes link - www.codingnepalweb.com/2020/04/responsive-drop-down-menu-bar-using.html

  • @seggamsuman
    @seggamsuman 4 роки тому

    Sir please do one thing for me, when I click on hamburger menu. Then cannot visible that and collapsible menu(cross symbol) showing at down of the menu.

    • @CodingNepal
      @CodingNepal  4 роки тому

      Please contact me on Instagram and I'll do for you.

  • @ishan7824
    @ishan7824 4 роки тому +1

    what was the use of nav:after in this?

    • @CodingNepal
      @CodingNepal  4 роки тому

      In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

    • @ishan7824
      @ishan7824 4 роки тому

      @@CodingNepal But here in this video, why did you use display:table property under nav::after? I didn't see any changes

  • @khatariinsaan5284
    @khatariinsaan5284 3 роки тому

    Great bro plz try to provide sorce Code

  • @pakistanigamer4702
    @pakistanigamer4702 2 роки тому

    Good mgr bhai atleast thora saf to likho age peche kia hua he sara uper se youtube pe dala content thora saf to rakho li ek jaga sahi line mein dia he to dusra li uper rakh neche href dia he or bhi ese mistakes hein

  • @manuuppal3696
    @manuuppal3696 3 роки тому

    Hey When I add dropdown it doesn't stay open. Why?

  • @jerrylkm9902
    @jerrylkm9902 4 роки тому +1

    .may I know what your using the software?

  • @dhavalmainkar4878
    @dhavalmainkar4878 3 роки тому

    somebody please help after i set the opacity to 0 visibility: hidden in nav ul ul and again i set opacity to 1 and visibility:visible i still cant see my drop down list someone please help

  • @breeamber
    @breeamber 4 роки тому +1

    Coding Nepal I'm done doing this drop down menu buy how am I going to turn this into an hamburger menu without starting all over again cause your other videos showed you starting all over again

    • @CodingNepal
      @CodingNepal  4 роки тому

      I didn't understand

    • @breeamber
      @breeamber 4 роки тому +1

      What I'm trying to say is that I did it dropdown navigation bar and it works fine on the laptop. But it doesn't work fine on my mobile phone how can I change it to appear as an hamburger menu on a mobile phone and still appear as a drop down on a laptop or computer

    • @CodingNepal
      @CodingNepal  4 роки тому

      Have you watched video complete...? I've done this part in the video.

    • @CodingNepal
      @CodingNepal  4 роки тому

      Here is the codes of this tutorial - www.codingnepalweb.com/2020/04/responsive-drop-down-menu-bar-using.html

  • @imlu4617
    @imlu4617 4 роки тому +1

    i love u

  • @tanmayjain9964
    @tanmayjain9964 4 роки тому +1

    Why my background image don't load after using this header?

    • @CodingNepal
      @CodingNepal  4 роки тому

      You may did some some mistakes on giving proper image path.

    • @tanmayjain9964
      @tanmayjain9964 4 роки тому +1

      @@CodingNepal image path was right but when i remove header image appears

    • @CodingNepal
      @CodingNepal  4 роки тому

      Then you should give z-index to the image.

  • @saifeddine6479
    @saifeddine6479 3 роки тому +1

    can someone explain to me what was the role of this line:
    nav:after{
    content:' ' ;
    display : table;
    clear: both;
    }

    • @CodingNepal
      @CodingNepal  3 роки тому +1

      :after is a psuedo element or selector and the “clear: both” means floating the elements are not allowed to float on both sides.

    • @ianjoshuabacud728
      @ianjoshuabacud728 3 роки тому

      @@CodingNepal nav :after is not high lighten in my code, what should I do?

  • @mallanagouda3278
    @mallanagouda3278 3 роки тому +1

    Source Code Please?

  • @diptithakur2577
    @diptithakur2577 Рік тому

    Where is the responsive video of this series?

  • @shaileshjaiswar
    @shaileshjaiswar Рік тому

    can someone provide me the link to part-2? that would really help me

  • @binkositideslors1491
    @binkositideslors1491 3 роки тому +1

    hello , thanks for the course and you explain verry well but i have got a question for you,
    how to make a responsive slide menubar like for amazone without a reduiced nav bar as in your course. thanks.

  • @devShahriar
    @devShahriar 4 роки тому +1

    brother i need the source code but given link of the website doesn't have the source code if it has kindly give that link the direct one
    cause i tried so many times but didn't able to code the same thing as you had coded

    • @CodingNepal
      @CodingNepal  4 роки тому +1

      Here is the direct codes link - www.codingnepalweb.com/2020/04/responsive-drop-down-menu-bar-using.html

  • @maxigarrett3121
    @maxigarrett3121 3 роки тому +1

    Float???

  • @Akshatvaibhavmishra
    @Akshatvaibhavmishra 3 роки тому

    it would be more useful if you were explaining the code

  • @winter3410
    @winter3410 4 роки тому +1

    how can i replace the logo for an image instead of the text?

    • @CodingNepal
      @CodingNepal  4 роки тому

      Watch this - ua-cam.com/video/AkK8yHC4TlI/v-deo.html

  • @mohammadkatwara7826
    @mohammadkatwara7826 4 роки тому +1

    i am unable to find this video source code. please help me out

    • @CodingNepal
      @CodingNepal  4 роки тому

      Go through description link and search the title of this tutorial.