Responsive Dropdown Menu Bar with Search Field using only HTML & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ก.ย. 2024

ความคิดเห็น • 74

  • @CodingNepal
    @CodingNepal  3 ปีที่แล้ว +19

    Nowadays font awesome CDN link/script that I provided not support so your icons may not be showing. Just replace that line no.8 script tag with this

    • @asmfunteam7130
      @asmfunteam7130 3 ปีที่แล้ว +1

      I have an idea for you. Think there is a lot of audio card in a page. If anyone wants to get a specific song he will be able to use the search bar and search between the audios. Plz plz, make a video on it. This is also very rare on youtube. You will get more views also.

    • @maximilianokingston7304
      @maximilianokingston7304 3 ปีที่แล้ว

      Instablaster.

  • @ignrey
    @ignrey 3 ปีที่แล้ว +4

    The way you structure the video and put all the time marks in the description, the title, even your website it's good. I'll recommend this channel to any freelancer that has finished their studies and want to get live examples of functionality and programming besides the design. Thanks for the video!

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      You comment made my day man. Thank you so much :)

  • @burgasdragonheirsilentgods
    @burgasdragonheirsilentgods 3 ปีที่แล้ว +1

    As a developer I enjoy this video ! Great presentation and skills ! Keep coding !

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Glad you enjoyed it!

  • @Funnyvideo-qv6eb
    @Funnyvideo-qv6eb 3 ปีที่แล้ว +2

    Without watching the full video like gardeko Broo love ur tutorial

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Thank you so much 😀

  • @hassenhamrouni2147
    @hassenhamrouni2147 3 ปีที่แล้ว +2

    YOU ARE GENIUS AND INSPIRING . UPLOAD MORE 🙌

  • @vaishnavia.n.312
    @vaishnavia.n.312 ปีที่แล้ว

    You are awesome man. One fine day I will also code like you.

  • @sanjunimje3703
    @sanjunimje3703 3 ปีที่แล้ว +1

    You are so talented bro keep growing..

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Thank you bro.. Stay tuned 💙

  • @itzzzyashu
    @itzzzyashu 2 ปีที่แล้ว +1

    New subscriber 😁, Keep it up!

    • @CodingNepal
      @CodingNepal  2 ปีที่แล้ว +1

      Thanks for subbing!

  • @S2GSEXM
    @S2GSEXM 3 ปีที่แล้ว +1

    Great videos, good luck! 👏👏

  • @axomstudy
    @axomstudy ปีที่แล้ว

    He should have in millions of subscribers

  • @minzcode
    @minzcode 3 ปีที่แล้ว

    Nice work! It was very helpful.

  • @quancume
    @quancume 3 ปีที่แล้ว

    proud to learn it from a nepali .It helped a lot and was awesome.

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 3 ปีที่แล้ว +2

    Amazing Sir keep going

  • @gabrielcouto4356
    @gabrielcouto4356 2 ปีที่แล้ว +1

    Fanstastic, Thank very much

    • @CodingNepal
      @CodingNepal  2 ปีที่แล้ว +1

      Glad you liked it!

  • @samratghimire7307
    @samratghimire7307 3 ปีที่แล้ว +1

    How can I prevent the moving of Elements when I hover over the Nav bar ?
    Actually I know that is due to doublr padding ( One on Hover and One on Element itself ) so, How can Make that Rest Elements dont move While I hover.

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      I didn't understand.. Can you explain it more?

  • @vaishnavia.n.312
    @vaishnavia.n.312 ปีที่แล้ว

    Hello @codingNepal, @time-stamp 13:28, .wrapper #show-search:checked ~ .search-icon i::before{ content:""}, I have given after instead of before, to test the behaviour, the "x" got placed after the magnifying glass, Similarly, when we write before, the "x" should be placed before the magnifying glass, Right? But how is only the "x" being displayed?

  • @jomarbolusan2682
    @jomarbolusan2682 2 ปีที่แล้ว

    Nice video sir

  • @yunusyavuz6147
    @yunusyavuz6147 2 ปีที่แล้ว

    Perfect Projects Bro

  • @blackparadox8038
    @blackparadox8038 2 ปีที่แล้ว +1

    how do I add background image to this website, and how to make search bar work

  • @jukujak9268
    @jukujak9268 ปีที่แล้ว

    can you write code in js to search bar? I have dropdown menu on middle page with product and i need working code to search this product. If i search specific product other must be hiden.

  • @camilasalazarfigueroa9330
    @camilasalazarfigueroa9330 2 ปีที่แล้ว

    Hello, I wanted to ask if I'm using instead of how do I do to change the image of the search-icon?

    • @fuckedlaptop364
      @fuckedlaptop364 ปีที่แล้ว

      first you need an image, second you need to change the i on CSS to img, then you need to place a size if the size ain't good

  • @yellowduckywithlegs
    @yellowduckywithlegs 2 ปีที่แล้ว

    hi! the search field is covering my 'x' icon and i also cant seem to get the search field to cover the entire height of the nav bar, someone please help me? :(

  • @komalyaqoob2236
    @komalyaqoob2236 ปีที่แล้ว

    Excellent 👍but why unicode"\f00d" is not working?

  • @ayansarkar8768
    @ayansarkar8768 3 ปีที่แล้ว +1

    how can i make search.js file to search and code?

  • @kriztmarbaladad7191
    @kriztmarbaladad7191 3 ปีที่แล้ว

    help, how would i put thenavbar onthe left side?

  • @ahmedserag7072
    @ahmedserag7072 2 ปีที่แล้ว +1

    incredible
    😉

  • @constantine9074
    @constantine9074 ปีที่แล้ว

    im a beginner but i understand now that there is a lot of totally unnecessary EXTRA code here... but for learning its cool

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 ปีที่แล้ว

    Nice , thanks video

  • @jalobe25
    @jalobe25 3 ปีที่แล้ว

    thanks very much

  • @vengalrao5772
    @vengalrao5772 ปีที่แล้ว

    25:10 relative means ? How it performs? Anyone ? Answer please

  • @yutattsang4802
    @yutattsang4802 3 ปีที่แล้ว

    hello, can you teach me, how to align center ul class "links"?

  • @ItzRyanL
    @ItzRyanL 2 ปีที่แล้ว

    can you teach us how to make a responsive working search bar for this dropdown menu bar?

  • @denisfelipe6172
    @denisfelipe6172 3 ปีที่แล้ว +1

    Hey, I hope you're okay! In first place, I would like to thank you for your videos!
    And I want to know if you can tell us about your vscode extensions, it would help me a lot.

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +3

      It's not VSCode...It's a Atom Text Editor and I used Atom HTML Preview, Pigments, Emmet, Live Server, File Icons.

  • @yashagoxd
    @yashagoxd 2 ปีที่แล้ว +1

    apakah ini akan responsive di hp/Android?

  • @ajaydabhi7416
    @ajaydabhi7416 3 ปีที่แล้ว +2

    Bro responshive img slider ki 1 video bando

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Ok bro. You can watch these also:
      th-cam.com/video/LC9LkDXkn6k/w-d-xo.html
      th-cam.com/video/f__ykT47lBQ/w-d-xo.html
      th-cam.com/video/YunLfczBbkY/w-d-xo.html

    • @ajaydabhi7416
      @ajaydabhi7416 3 ปีที่แล้ว

      @@CodingNepal ha wo dik pan left and right & automatically slide Chang nhi hoti so veai Vali video bando or responshive ho. Note: imge ki width & hight kitne leni ho vo bhi meanshan Kar na.
      - thank you.

  • @rhebisco1091
    @rhebisco1091 3 ปีที่แล้ว

    Hello!
    How can i add a footer into this code?
    Please. Response

  • @aikoyuki6953
    @aikoyuki6953 3 ปีที่แล้ว

    No andan los iconos, no se puede seguir el tutorial. Ni siquiera bajando los archivos finales

  • @buzzz1861
    @buzzz1861 3 ปีที่แล้ว +1

    Hi mate! None of those links are available now. Can u publish the real link of those codes? I really would appreciate that

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Site is already live please go to given link and you'll get codes

  • @nowara145
    @nowara145 3 ปีที่แล้ว +2

    Please do the hangman game

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Sure... I'll make video on it

  • @hasheemirafsanjani4656
    @hasheemirafsanjani4656 3 ปีที่แล้ว +1

    Sir , may i see a full source code
    I check it in codingnepalweb.com is not available

  • @mariashaine
    @mariashaine 3 ปีที่แล้ว +1

    search box wont appear when i copy and paste it....

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Please read the pinned comment

    • @mariashaine
      @mariashaine 3 ปีที่แล้ว

      @@CodingNepal oh thank you

  • @villagelifeofchilds1126
    @villagelifeofchilds1126 3 ปีที่แล้ว +1

    writing style of code is not well arranged.

  • @subasbashyal9019
    @subasbashyal9019 3 ปีที่แล้ว

    keep on good work but i m still stuck

  • @kisantai618
    @kisantai618 ปีที่แล้ว

    where part2

  • @salonimourya-s6h
    @salonimourya-s6h ปีที่แล้ว

    Where is responsive part bro

  • @Blackgamermods
    @Blackgamermods 3 ปีที่แล้ว +1

    👍👍👍👍👍👍👍👍👍👍👍

  • @nr377
    @nr377 2 ปีที่แล้ว

    🌟🌟🌟🌟🌟

  • @mariogamilo
    @mariogamilo 3 ปีที่แล้ว

    great video but my search box is not coming up.

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Please read the description note

  • @nepalimovies7087
    @nepalimovies7087 3 ปีที่แล้ว

    hawa hawa khae ta responsive coding toit