How to Create Navbar in HTML and CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 พ.ค. 2023
  • How to Create Navbar in HTML and CSS, How to Make Navbar in HTML and CSS, How to Create Navigation Bar in HTML and CSS, How to Make Navigation Bar in HTML and CSS, Simple Navbar HTML CSS
    Click For More: / @codehal
    Website:
    codehalweb.com/
    -------------------------------------------------------------------
    Get Source Code from here and support me ❤
    buymeacoffee.com/codehalyoutu...
    Get Source Code by PayPal
    ko-fi.com/s/df5f8f55e5
    🔔 Subscribe Now!
    / @codehal
    Related Videos:
    Responsive Navbar HTML CSS | Responsive Animated Navigation Bar
    • Responsive Navbar HTML...
    Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects
    • Animated Navigation Ba...
    Animated Navigation Menu Bar using HTML CSS | Animated Tabs with Indicator
    • Animated Navigation Me...
    How to Create an Active Nav Link on Scroll using HTML CSS and Javascript | Active Menu Class
    • How to Create an Activ...
    Download Image & Start Project From Scratch:
    drive.google.com/file/d/157sW...
    Image Sources:
    Image created by freepik
    www.freepik.com/free-vector/g...
    Codehal
    -------------------------------------------------------------------
    #css #cssanimation #csseffect #codehal
    -------------------------------------------------------------------
    Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

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

  • @lynn5804
    @lynn5804 หลายเดือนก่อน +1

    At first, it didn't work for me and then I realized I had missed some of the steps lol. It actually works, making my assignment nice. Good video

  • @carlosdejesus7109
    @carlosdejesus7109 ปีที่แล้ว +16

    Thanks for sharing your knowledge! Very helpful and easy to understand.

  • @ogunikitty
    @ogunikitty 5 หลายเดือนก่อน +2

    Thanks my guy. Helping me land clients as a beginer

  • @guchfun
    @guchfun 3 หลายเดือนก่อน

    Thank you for sharing this tutorial! It's nice looking and pretty straightforward. I was going to use Bootstrap but I may just code it myself with a little extra JS thrown in for small animation touches. Next need to find a way to link a navbar file to the homepage so I can make changes in just one place.

  • @krzysiekkrzysiek9059
    @krzysiekkrzysiek9059 10 หลายเดือนก่อน +6

    So simple, so awesome.

  • @cetlan404
    @cetlan404 8 หลายเดือนก่อน +1

    Great video, great tutorial. Thanks bro

  • @berkoo5497
    @berkoo5497 2 หลายเดือนก่อน

    Short Video, AWSOME Job !! Thanks

  • @tahalamkahkah-ok9ry
    @tahalamkahkah-ok9ry ปีที่แล้ว

    you are the best continue❤❤

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

    Just love it❤

  • @giorgimtsituri7826
    @giorgimtsituri7826 ปีที่แล้ว +15

    I am learning a lot from your videos, thanks

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

      Keep going man!

  • @charlestoneoyoo
    @charlestoneoyoo 8 หลายเดือนก่อน

    woow, thank you...this was a good practice project

  • @prabhatjha3674
    @prabhatjha3674 5 หลายเดือนก่อน

    thanks codehal for this amazing tuotrial

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

    Good job, thanks

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

    Awesome 😍
    2nd from Bangladesh 💝

  • @user-vh8fq6vj6z
    @user-vh8fq6vj6z 4 หลายเดือนก่อน

    Thank you so Much i learn it

  • @muhdkhairulamirinum3985
    @muhdkhairulamirinum3985 25 วันที่ผ่านมา

    TQ. very helpful

  • @sergiumihaitodireanu2901
    @sergiumihaitodireanu2901 3 หลายเดือนก่อน

    Wow, thank you!!❤

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

    Finally he know He have a channel 😅btw very Gud ❤

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

      😅😅

  • @rrkredits
    @rrkredits 14 วันที่ผ่านมา

    Super

  • @aishaShwehna
    @aishaShwehna 6 หลายเดือนก่อน +1

    Thank You..
    🙏

  • @relaxsoundT68
    @relaxsoundT68 หลายเดือนก่อน

    I love it bro😍😍

  • @TheRocketFlyerMAX
    @TheRocketFlyerMAX 6 หลายเดือนก่อน

    best tutorial ever thanks so mucj

  • @ahmedghallab5342
    @ahmedghallab5342 3 หลายเดือนก่อน

    شكرا Thank it was helpful💯💯

  • @FanMade522
    @FanMade522 8 หลายเดือนก่อน +1

    Nice!!!

  • @Nanashi-rq7lk
    @Nanashi-rq7lk 6 หลายเดือนก่อน

    Nice tutorial

  • @adrianonocanada
    @adrianonocanada 8 หลายเดือนก่อน

    very nice 6 min !!!

  • @user-xl5rx8ro1s
    @user-xl5rx8ro1s ปีที่แล้ว

    thank you

  • @techobi2137
    @techobi2137 4 หลายเดือนก่อน

    THANKSS, this video is very nice

  • @henoksebsibe5846
    @henoksebsibe5846 5 หลายเดือนก่อน

    wow simply wow

  • @eagle4226
    @eagle4226 8 หลายเดือนก่อน

    thanks man

  • @raedbouguerra1553
    @raedbouguerra1553 4 หลายเดือนก่อน

    nice video thx, btw what's the vs code theme ?

  • @TyroneEntertainingJoseph
    @TyroneEntertainingJoseph 5 หลายเดือนก่อน

    Just subscribed

  • @dakwahvibes
    @dakwahvibes 21 วันที่ผ่านมา

    thanx broo

  • @user-dn4um5kk5z
    @user-dn4um5kk5z 2 หลายเดือนก่อน

    thanks a lot bro

  • @Snap-Tutorials
    @Snap-Tutorials 10 หลายเดือนก่อน

    great

  • @abhinavsreekumar4703
    @abhinavsreekumar4703 10 หลายเดือนก่อน +4

    Can the logo be moved further to the left? Amazing content❤

  • @elunico10
    @elunico10 10 หลายเดือนก่อน +1

    good navbar bro
    wouldn't be easier to use a border or outline to the a's?

    • @Deepak-lx7zb
      @Deepak-lx7zb 4 หลายเดือนก่อน

      i thought the same haha

  • @zelalemkebede-gg4ui
    @zelalemkebede-gg4ui 4 หลายเดือนก่อน

    Nice worj🎉❤❤❤

  • @seahmadnailal-darabi8985
    @seahmadnailal-darabi8985 6 หลายเดือนก่อน

    Very nice

  • @AbdallahMaikano-np4jy
    @AbdallahMaikano-np4jy 12 วันที่ผ่านมา

    bro please where do you get those nice background pictures from

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

    Love from India ❤sir please work hole this in mobile please because import URL didn't show in mobile app reaplit

  • @adfsddsadsadq3323
    @adfsddsadsadq3323 8 หลายเดือนก่อน

    Hello, I have a question: how can I make the strip fly out on the other side?

  • @tommypool-xd5np
    @tommypool-xd5np 2 หลายเดือนก่อน +3

    Can I ask about the first input on the .css stylesheet.
    I see a lot of people that start with * { and set the margin, padding to 0 and box sizing to border box. Why is this? Is there anywhere that explains this?
    (I am very new to this!)

    • @beko1603
      @beko1603 หลายเดือนก่อน +1

      The * selector targets all elements on the page. Setting margin and padding to 0 and box-sizing to border-box ensures consistent spacing and sizing, making styling more predictable across different browsers. It's a common practice for CSS resets or normalizations to establish a baseline for styling.

    • @tommypool-xd5np
      @tommypool-xd5np หลายเดือนก่อน

      @@beko1603 Thank you very much for the explanation! :)

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

    ada course nya ga bang

  • @kaan9147
    @kaan9147 3 หลายเดือนก่อน

    hocam selamlar aynı sayfa içinde iki farklı yapı oluşturdum body etiketlerindeki çakışmayı nasıl önlerim (important ?)

  • @omarwalied-yr8yx
    @omarwalied-yr8yx ปีที่แล้ว +1

    I'm from Egypt ❤

  • @qasimsk09
    @qasimsk09 6 หลายเดือนก่อน

    Which theme are u using

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

    Which website are you use for pictures?

    • @proCodeOfficial
      @proCodeOfficial 11 หลายเดือนก่อน

      he is usding freepik

  • @ohwen
    @ohwen 5 หลายเดือนก่อน

    this shit goes hard asf

  • @l.e.221
    @l.e.221 8 หลายเดือนก่อน +1

    Fantastic video for me as a beginer. I followed your instructions an copied all the same way. Instead of your 5 links I made 12. In this case my links can't be seen all. There ist a lot of space between Logo and first links, but the last 2 links are outside the page. How can I solve the problem?

    • @l.e.221
      @l.e.221 8 หลายเดือนก่อน +4

      I found the mistake. in the css I forgot the "*" in the first row. now it works.

  • @dkebun7577
    @dkebun7577 4 หลายเดือนก่อน

    Hi there. Instead of words, how can we replace with a diagram? Like a "home logo" to make it nice looking

  • @ClimbToZenith
    @ClimbToZenith 2 หลายเดือนก่อน

    tnx

  • @CalisthenicsMotivation220
    @CalisthenicsMotivation220 9 หลายเดือนก่อน

    thank you so much bro

  • @IceCrownOne
    @IceCrownOne 3 หลายเดือนก่อน +1

    i did the same code but i cant get that little white line

  • @NoBummer
    @NoBummer หลายเดือนก่อน

    swag swag swag poggers pogg i love swag i love poggers

  • @Blayke
    @Blayke 9 หลายเดือนก่อน +2

    At 2:35, what part of the css file moves the items to the top right of the screen? I copied what you did but it stayed in the top left

    • @hafidz2698
      @hafidz2698 9 หลายเดือนก่อน

      He used display:flex and justify-content: space-between
      Did you ensure that the logo and the nav bar are separate from each other?

    • @arutoki9810
      @arutoki9810 21 วันที่ผ่านมา

      @@hafidz2698 How can they be separated?

  • @malekalbawaih
    @malekalbawaih 8 หลายเดือนก่อน

    what to put instead of Logo to show my own logo ??

    • @AstaZephyr
      @AstaZephyr หลายเดือนก่อน

      i think you just put your image by using

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

    First❤

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

      Hi, thanks ❤

  • @DamienLavizzo
    @DamienLavizzo หลายเดือนก่อน +1

    For some reason when I use "space-between", it puts the elements at opposite ends of the page width.

    • @zlbkaa
      @zlbkaa 26 วันที่ผ่านมา +1

      You might've forgotten to add 'box-sizing: border-box;' property to the * tag. At least, it was the reason in my case.

    • @DamienLavizzo
      @DamienLavizzo 26 วันที่ผ่านมา +1

      @@zlbkaa thanks for this! As soon as I’m at the computer I’ll double check and see if that fixes it!

  • @montalesmarktitusr.4930
    @montalesmarktitusr.4930 9 หลายเดือนก่อน +14

    the background image is not showing

    • @Ana_.H
      @Ana_.H 5 หลายเดือนก่อน +6

      You have to put the image and project in the same file

    • @Jay_brahim
      @Jay_brahim หลายเดือนก่อน

      ​@@Ana_.H like how mine not showing too.
      They are in the same file

    • @Melissa0V
      @Melissa0V 24 วันที่ผ่านมา

      ​​@@Jay_brahim Maybe your invoking it the wrong way.

  • @rosmelliam2510
    @rosmelliam2510 7 หลายเดือนก่อน

    Can anyone please tell me what theme he is using ?

  • @Vynx__
    @Vynx__ 9 หลายเดือนก่อน

    From where do you get background images? i like to customize your code's and i want to implement new background images 🥰🥰

  • @CartVista-kb4mw
    @CartVista-kb4mw 3 หลายเดือนก่อน

    where do you get th image

  • @benkramer1899
    @benkramer1899 4 หลายเดือนก่อน

    Ich liebe dich

  • @ayush1344
    @ayush1344 9 หลายเดือนก่อน

    bro responsive kasa banana ka woh bhi batate

  • @kubalu4835
    @kubalu4835 4 หลายเดือนก่อน

    hey its all working but theres one problem i dont see the content i implemented into the page

  • @hilbrambaihaki6851
    @hilbrambaihaki6851 9 หลายเดือนก่อน

    Bro make best logo in 6m than me on my 2 hours

  • @gamerjohnbot
    @gamerjohnbot 7 หลายเดือนก่อน +1

    my navagation bar text is aligned to the left

    • @rireadeoti2615
      @rireadeoti2615 7 หลายเดือนก่อน

      Maybe too much margin

  • @user-mr9jj7bs3e
    @user-mr9jj7bs3e หลายเดือนก่อน

    how do you add text below?

  • @KOSRedacted
    @KOSRedacted 6 หลายเดือนก่อน

    When I do the background thing it's it showing up I have it exactly like you have it, help?

  • @curon_licentia
    @curon_licentia หลายเดือนก่อน

  • @Osama-Abdelsalam
    @Osama-Abdelsalam 8 หลายเดือนก่อน

    Theme name?

  • @carolinabenitez2121
    @carolinabenitez2121 หลายเดือนก่อน

    How can I fix this when I use on mobile device? It doesn’t look right when i use a mobile device

  • @Adidinamite
    @Adidinamite 2 หลายเดือนก่อน +1

    haha bro nice joke with the only

  • @leonciojrcoronado2733
    @leonciojrcoronado2733 4 หลายเดือนก่อน

    Sir what is the content? content: " "; ?

  • @XFOOTBALL_EDITS
    @XFOOTBALL_EDITS 4 หลายเดือนก่อน

    why in navbar a margin-left written why padding-left was not written

    • @TLOZ1986
      @TLOZ1986 3 หลายเดือนก่อน

      Why padding?

  • @TLOZ1986
    @TLOZ1986 3 หลายเดือนก่อน

    Its not responsive

    • @projackson355
      @projackson355 2 หลายเดือนก่อน

      Did u add a link in the # place?

  • @TLOZ1986
    @TLOZ1986 3 หลายเดือนก่อน

    Responsive değil

  • @luther-pd5uy
    @luther-pd5uy 7 หลายเดือนก่อน

    music = instant dislike

  • @ClimbToZenith
    @ClimbToZenith 2 หลายเดือนก่อน

    you are the best continue❤❤