Responsive Navigation Menu Bar + Hamburger Menu Toggle - Only with CSS

Sdílet
Vložit
  • čas přidán 26. 04. 2020
  • Please subscribe: / @purecode7237
    In this video we create a responsive navigation manu bar with logo, only with CSS and HTML, NO javascript! Using media querys we toggle the hamburger menu (made pure with CSS) to open the menu on mobile and tables
    MORE SMOOTH TUTS:
    Pure CSS Parallax Effect on Scroll (no JS) - Smooth Parallax Scrolling with Fruits:
    • Pure CSS Parallax Effe...
    Pure CSS Scroll Snap Effect:
    • Pure CSS Scroll Snap E...
    Pure CSS Animated Text & Border Box Gradient Effect:
    • Pure CSS Animated Text...
    --------
    Music: Name of the Child - Motions
  • Jak na to + styl

Komentáře • 40

  • @sajunara1177
    @sajunara1177 Před 2 lety +1

    Bestes Tutorial und das erste, das so richtig klappt :) vielen Dank!

  • @LuisGutierrez-pc7wp
    @LuisGutierrez-pc7wp Před rokem +1

    This was most helpful! Saved my project. THANKS!

  • @Faith2472h
    @Faith2472h Před rokem +1

    make more please, you're a legend

  • @drfcozapata
    @drfcozapata Před rokem

    Thanks a lot bro!!! You safe my life 😄
    Blessings from Venezuela

  • @solflorhair
    @solflorhair Před rokem

    Thank you so much bro, you safe me from stress.

  • @anthonykiirucreative
    @anthonykiirucreative Před rokem

    Worked perfectly! Thanks.

  • @riddhichauhan9914
    @riddhichauhan9914 Před 3 lety

    Thanks a lot ... Bro...This video is very helpful to solve my problem of hamburger menu ...

  • @mishachubenko3394
    @mishachubenko3394 Před 7 měsíci +1

    You helped for my project !!! Thanks !!!

  • @user-id5ct2de8v
    @user-id5ct2de8v Před rokem

    big thanks who borned you bro...😊

  • @sparshnigam4470
    @sparshnigam4470 Před 4 lety

    Thanks a lot bro your video solved my problem

  • @i-techbyjhomz5302
    @i-techbyjhomz5302 Před 3 lety +5

    can u please give source code, i dont know what the problem, not working for me

  • @mohammadshahidshaikh3068

    Thanks Bro🤩

  • @yashparekh5192
    @yashparekh5192 Před 3 lety

    awesome !!

  • @sanketsingh5555
    @sanketsingh5555 Před 2 lety

    Thnx buddy

  • @patricknsolo5016
    @patricknsolo5016 Před rokem

    Thank you

  • @ravshansavurbaev
    @ravshansavurbaev Před rokem

    perfect

  • @darthlinox
    @darthlinox Před 2 lety

    Perfeito!!!!!

  • @manikantas1464
    @manikantas1464 Před 2 lety

    nice video

  • @Joegentleman2002jg
    @Joegentleman2002jg Před 3 lety +3

    been through this so many times and cant get it to work the source code would of been handy :(

  • @SolomonMathai
    @SolomonMathai Před měsícem

    display : none in toggle-menu how does it go dark

  • @RAZASHARP
    @RAZASHARP Před 7 měsíci

    ummm thanks...link in description would be awesmome!

  • @nestorivan112
    @nestorivan112 Před rokem +1

    The responsiveness works for me but not when I click the hamburger 🤔
    What am I doing wrong?

  • @Jitendra2619t
    @Jitendra2619t Před 9 hodinami

    can i get source code of this project

  • @Nomadev
    @Nomadev Před 4 měsíci

    Nice, very nice tutorial, but i have a problem when i pass to -768 the transition animation appears. Im doing mobile firts, the solution was delete the transition property of the menu, but now appears insta from right to left

  • @caudb854
    @caudb854 Před 5 měsíci

    I couldn't get "@media screen and (min-width: 992px)" to work.
    However, "@media only screen and (min-width: 992px)" did the trick.
    Add "only".

  • @movealongnothingtosee

    👏👏👏

  • @user-rn3pt2gd6l
    @user-rn3pt2gd6l Před 7 měsíci

    sorry sir i need only code line that make navigation responsive

  • @nicolaslondon
    @nicolaslondon Před rokem +2

    not working

  • @user-ew4nd3xw7s
    @user-ew4nd3xw7s Před měsícem

    Can you share That smooth logo???

  • @maddox3223
    @maddox3223 Před 11 měsíci

    For those who are not working type this when writing responsive code:
    @media (max-width: 992px)
    instead of:
    @media screen and (max-width:992px)

  • @monikdiwani1379
    @monikdiwani1379 Před 5 měsíci

    any can give source of the code or link plz...

  • @anupkaushik9370
    @anupkaushik9370 Před 6 měsíci

    What is the logic for checkbox even hamburger is placed ?
    Why all youtube tutorial has same method ?

  • @manindersingh4819
    @manindersingh4819 Před rokem

    👌👌👌👌👌👌👌💯💥

  • @prachi_s_h
    @prachi_s_h Před 3 lety +8

    Thanks but can you give source code in the description??👍🙏🙏

    • @sanketsingh5555
      @sanketsingh5555 Před 2 lety +2

      Behn jab chize samjh aa gyi toh code ki kya zaroorat khud code likho

    • @simpleasrough
      @simpleasrough Před 8 měsíci

      bhai hamara wala work nhi karta, kahi na kahi koye koye na koyi masla ajata hai
      @@sanketsingh5555

  • @missline95
    @missline95 Před 8 měsíci

  • @frederikmikkelsen3858

    Upload source code please

  • @geldelian
    @geldelian Před 7 měsíci

    where is the code

  • @abhishekdhumal7618
    @abhishekdhumal7618 Před rokem

    source code