How to Create Navbar in HTML and CSS

Поделиться
HTML-код
  • Опубликовано: 25 ноя 2024

Комментарии • 131

  • @lynn5804
    @lynn5804 6 месяцев назад +9

    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

  • @ogunikitty
    @ogunikitty 11 месяцев назад +4

    Thanks my guy. Helping me land clients as a beginer

  • @berkoo5497
    @berkoo5497 8 месяцев назад

    Short Video, AWSOME Job !! Thanks

  • @giorgimtsituri7826
    @giorgimtsituri7826 Год назад +18

    I am learning a lot from your videos, thanks

    • @codehal
      @codehal  Год назад +4

      Keep going man!

  • @carlosdejesus7109
    @carlosdejesus7109 Год назад +16

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

  • @ahmedghallab5342
    @ahmedghallab5342 9 месяцев назад +1

    شكرا Thank it was helpful💯💯

  • @sweetybaghwar2367
    @sweetybaghwar2367 2 месяца назад

    It was really good. Simple and clean. Thank you.

  • @IceCrownOne
    @IceCrownOne 8 месяцев назад +8

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

  • @darnell825
    @darnell825 Месяц назад

    Thanks!!! I've learned a lot from this video

  • @cristianrioja9844
    @cristianrioja9844 2 месяца назад +1

    Gooooood

  • @ClimbToZenith
    @ClimbToZenith 8 месяцев назад

    you are the best continue❤❤

  • @guchfun
    @guchfun 9 месяцев назад

    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.

  • @wahyuramadhanaz-zuhri1673
    @wahyuramadhanaz-zuhri1673 3 месяца назад

    Thanks, you got an instant like and subscribe for the straighforwars content!

  • @techobi2137
    @techobi2137 9 месяцев назад

    THANKSS, this video is very nice

  • @NumberSh
    @NumberSh Месяц назад

    really good 🎉

  • @ganeshgupta9692
    @ganeshgupta9692 Год назад +3

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

  • @krzysiekkrzysiek9059
    @krzysiekkrzysiek9059 Год назад +6

    So simple, so awesome.

  • @AbdulHadi-pn8xo
    @AbdulHadi-pn8xo 2 месяца назад +1

    thanks worked on first try!

  • @Sahil_Hansda_official
    @Sahil_Hansda_official 3 месяца назад

    Good job

  • @sergiumihaitodireanu2901
    @sergiumihaitodireanu2901 8 месяцев назад

    Wow, thank you!!❤

  • @aishaShwehna
    @aishaShwehna Год назад +1

    Thank You..
    🙏

  • @muhdkhairulamirinum3985
    @muhdkhairulamirinum3985 6 месяцев назад

    TQ. very helpful

  • @pongatweaks
    @pongatweaks 10 месяцев назад

    Thank you so Much i learn it

  • @TheRocketFlyerMAX
    @TheRocketFlyerMAX 11 месяцев назад

    best tutorial ever thanks so mucj

  • @rrkredits
    @rrkredits 6 месяцев назад

    Super

  • @1millionlabs
    @1millionlabs 11 месяцев назад

    thanks codehal for this amazing tuotrial

  • @relaxsoundT68
    @relaxsoundT68 6 месяцев назад

    I love it bro😍😍

  • @henoksebsibe5846
    @henoksebsibe5846 11 месяцев назад

    wow simply wow

  • @zelalemkebede-gg4ui
    @zelalemkebede-gg4ui 10 месяцев назад

    Nice worj🎉❤❤❤

  • @tommypool-xd5np
    @tommypool-xd5np 8 месяцев назад +4

    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 7 месяцев назад +5

      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 7 месяцев назад

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

  • @Lorance75
    @Lorance75 8 месяцев назад

    thanks a lot bro

  • @dakwahvibes
    @dakwahvibes 6 месяцев назад

    thanx broo

  • @TyroneEntertainingJoseph
    @TyroneEntertainingJoseph 11 месяцев назад

    Just subscribed

  • @uartim
    @uartim Месяц назад

    It looks better to me to have align-items: center for the flexbox

  • @cetlan404
    @cetlan404 Год назад +1

    Great video, great tutorial. Thanks bro

  • @jabrama3712
    @jabrama3712 2 месяца назад +2

    Yo bro, that was so fucking good and easy to understand and that music made it so much interesting, I was vibing the whole tutorial 😂

  • @FanMade522
    @FanMade522 Год назад +1

    Nice!!!

  • @tahalamkahkah-ok9ry
    @tahalamkahkah-ok9ry Год назад

    you are the best continue❤❤

  • @seahmadnail
    @seahmadnail 11 месяцев назад

    Very nice

  • @omarwalied-yr8yx
    @omarwalied-yr8yx Год назад +1

    I'm from Egypt ❤

  • @Nanashi-rq7lk
    @Nanashi-rq7lk Год назад

    Nice tutorial

  • @danmlbb2013
    @danmlbb2013 Год назад +1

    Just love it❤

  • @charlestoneoyoo
    @charlestoneoyoo Год назад

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

  • @nayeemhossain770
    @nayeemhossain770 Год назад

    Awesome 😍
    2nd from Bangladesh 💝

  • @abhinavsreekumar4703
    @abhinavsreekumar4703 Год назад +4

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

  • @Mada_Edits
    @Mada_Edits 2 месяца назад

    For some reason, the image wouldn't scale properly when it was 100vh but I changed it to 80vh and it now works... I'm thinking that this is maybe because of the device that I'm using? I'm not so sure as to why it did that

  • @ClimbToZenith
    @ClimbToZenith 8 месяцев назад

    tnx

  • @eagle4226
    @eagle4226 Год назад

    thanks man

  • @adrianonocanada
    @adrianonocanada Год назад

    very nice 6 min !!!

  • @atikadewi1118
    @atikadewi1118 Год назад

    Good job, thanks

  • @Victusu
    @Victusu 5 месяцев назад +1

    which vs code theme is that

  • @raedbouguerra1553
    @raedbouguerra1553 10 месяцев назад

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

  • @DecodeReels
    @DecodeReels Год назад +1

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

  • @sixinco
    @sixinco Год назад

    thank you

  • @AbdallahMaikano-np4jy
    @AbdallahMaikano-np4jy 6 месяцев назад

    bro please where do you get those nice background pictures from

  • @Snap-Tutorials
    @Snap-Tutorials Год назад

    great

  • @frankg2579
    @frankg2579 3 месяца назад

    what does the * in the stylesheet refer to?

  • @jpedrothejo
    @jpedrothejo 5 месяцев назад

    (makes window smaller)
    "wait where are the other options"

  • @Auynim
    @Auynim 4 месяца назад

    hey so the visual code wont let me type "transition: .3s;" on the line 54 in stylecss
    edit: i try on ".navbar a:hover::before" and it worked

  • @montalesmarktitusr.4930
    @montalesmarktitusr.4930 Год назад +19

    the background image is not showing

    • @Ana_.H
      @Ana_.H 10 месяцев назад +6

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

    • @Thasmilingcoast
      @Thasmilingcoast 7 месяцев назад

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

    • @Melissa0V
      @Melissa0V 6 месяцев назад

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

    • @artwork-studios
      @artwork-studios 4 месяца назад

      ​@@Melissa0Vcould be or could be no browser support

  • @elunico10
    @elunico10 Год назад +1

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

    • @Deepak-lx7zb
      @Deepak-lx7zb 10 месяцев назад

      i thought the same haha

  • @Abdelillah-27
    @Abdelillah-27 Год назад

    thank you so much bro

  • @ohwen
    @ohwen 11 месяцев назад

    this shit goes hard asf

  • @kaan9147
    @kaan9147 9 месяцев назад

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

  • @shaddamsayyid
    @shaddamsayyid 3 месяца назад

    can u make it with explaination??

  • @GovaObito
    @GovaObito 10 месяцев назад

    Ich liebe dich

  • @qasimsk09
    @qasimsk09 Год назад

    Which theme are u using

  • @NoBummer
    @NoBummer 7 месяцев назад

    swag swag swag poggers pogg i love swag i love poggers

  • @xafuu7286
    @xafuu7286 Год назад

    ada course nya ga bang

  • @JoséAugustoR.Santos
    @JoséAugustoR.Santos 3 месяца назад

    can someone please explain to me what this part means exactly?
    .navbar a::before

  • @dkebun7577
    @dkebun7577 10 месяцев назад

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

  • @kubalu4835
    @kubalu4835 10 месяцев назад

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

  • @DamienLavizzo
    @DamienLavizzo 7 месяцев назад +2

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

    • @aV5d9nlUBQ9
      @aV5d9nlUBQ9 6 месяцев назад +2

      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 6 месяцев назад +1

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

  • @acidxop8411
    @acidxop8411 4 месяца назад

    can someone tell me why did he use z -index and why is the result same even after using it?

    • @srt312
      @srt312 4 месяца назад

      It is used to blend the background image with the navbar...thats why you can spot the image at the back of the text in the navbar

  • @gamerjohnbot
    @gamerjohnbot Год назад +1

    my navagation bar text is aligned to the left

  • @l.e.221
    @l.e.221 Год назад +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 Год назад +4

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

  • @adfsddsadsadq3323
    @adfsddsadsadq3323 Год назад

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

  • @KOSRedacted
    @KOSRedacted 11 месяцев назад

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

  • @CodeCrafte_r
    @CodeCrafte_r Год назад

    Which website are you use for pictures?

  • @malekalbawaih
    @malekalbawaih Год назад

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

    • @AstaZephyr
      @AstaZephyr 6 месяцев назад

      i think you just put your image by using

    • @Vortex03
      @Vortex03 2 месяца назад

      hi! did you figure out how to do it? i'm having the same problem

  • @rosmelliam2510
    @rosmelliam2510 Год назад

    Can anyone please tell me what theme he is using ?

  • @Blayke
    @Blayke Год назад +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 Год назад

      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 6 месяцев назад

      @@hafidz2698 How can they be separated?

  • @hilbrambaihaki6851
    @hilbrambaihaki6851 Год назад

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

  • @tandung03
    @tandung03 Год назад

    First❤

    • @codehal
      @codehal  Год назад +1

      Hi, thanks ❤

  • @Miyeruuu
    @Miyeruuu 7 месяцев назад

    how do you add text below?

  • @Adidinamite
    @Adidinamite 8 месяцев назад +1

    haha bro nice joke with the only

    • @BloxTxsuu
      @BloxTxsuu 4 месяца назад

      lil nega wdym

  • @Yousef-o8z
    @Yousef-o8z Месяц назад

    the navbar is moving when i scroll down i want it to stay

  • @CartVista-kb4mw
    @CartVista-kb4mw 9 месяцев назад

    where do you get th image

  • @carolinabenitez2121
    @carolinabenitez2121 7 месяцев назад

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

  • @curon_licentia
    @curon_licentia 7 месяцев назад

  • @ayush1344
    @ayush1344 Год назад

    bro responsive kasa banana ka woh bhi batate

  • @Osama-Abdelsalam
    @Osama-Abdelsalam Год назад

    Theme name?

  • @leonciojrcoronado2733
    @leonciojrcoronado2733 10 месяцев назад

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

  • @efuz_master
    @efuz_master 9 месяцев назад

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

    • @TLOZ1986
      @TLOZ1986 8 месяцев назад

      Why padding?

  • @TLOZ1986
    @TLOZ1986 8 месяцев назад

    Responsive değil

  • @TLOZ1986
    @TLOZ1986 8 месяцев назад

    Its not responsive

    • @projackson355
      @projackson355 8 месяцев назад

      Did u add a link in the # place?

  • @luther-pd5uy
    @luther-pd5uy Год назад

    music = instant dislike