Faire une Navbar Responsive en HTML & CSS - Expliqué de A à Z avec Menu Hamburger

[@LiveCodeofficiel]

Les ressources de la vidéo : formation.live-code.fr/Ressources-Navbar Le code JS pour le menu : pastebin.com/KtXmqHCU

[@farelandjandji8558]

bonjour comment je peux avoir le lien

[@farelandjandji8558]

bonjour comment je peux avoir le lien

[@amandinehoudbert9554]

C'est quoi le code de déchiffrement?

[@GVAC-MUSIC]

besoin du lien que faire

[@jmerlouthekson6638]

Bonjour . Je suis nouveau dans le domaine informatique . comment tu fais pour faire sortir la console du développeur ? Pour insérer le menu ?

[@Saya.misri_aussi-tha01]

J'ai adoré, merci, je vais m'en servir pour ma première soutenance dans notre projet à trois. Encore merci.

[@TariktechVlog]

Franchement je viens de tomber sur ton profil je trouve que ta vidéo explicative est vraiment intéressante, merci beaucoup.👍

[@williamjr5826]

Un tuto au top ! Quand on a quelques bonnes bases, on comprend relativement rapidement comment tout s'imbrique. Merci !

[@jeanmoncher2661]

Un tuto bien expliqué et commenté du début jusqu'à la fin; ce qui permet aux débutants et aux seniors de mieux comprendre le concept en arrière de ce menu.

[@user-lb1gt6tu9l]

Je m'intéresse à la création Web suite à un tp dans mon école. Et je dois dire que t le meilleur tuto sur lequel je suis tombé et de très loin. Merci pour ton temps et ton expertise.

[@LiveCodeofficiel]

🙏🙏🙏

[@zafer2562]

Merci tu me sauves la vie mon gars , je n'arrivais pas a faire se truc trop con :)

[@lempereurgeek3172]

franchement le premier tuto sur des navbar responsives que je trouve simple, pratique et fonctionnel ! merci beaucoup !

[@LiveCodeofficiel]

🙏🙏

[@Judaak_]

Après de nombreuses recherches, j'ai enfin trouvé parfaitement ce que je cherchais ! Tu me sauves la vie Mr, merci beaucoup ! Keep going !

[@alloaluile3608]

went through when I first started video editing, now it's taking a whole new switch and learning soft will only boost my courage for the

[@OutongOutong-zh3zw]

Frerot, franchement, t'es le best. J'avais téléchargé la vidéo pour pouvoir le réaliser. Mais à la fin, je me dis que ne pas laisser un like et un commentaire serait un péché. Force à toi .

[@amoweb2409]

incroyable j'ai galéré à l'adapter à mon site mais une fois bien compris ça marche super bien

[@rickwarel9935]

merci infiniment car grâce a tes vidéos j'ai compris le responsive en HTML-CSS.

[@pastiille7467]

salut, je suis en pleine formation et tes vidéos m'aide beaucoup meerci

[@XeOneDash]

Merci, c'est très concis et bien expliqué.

[@Endermax_]

merci pour la vidéo grâce à toi j'ai compris comment fonctionne le responsive !

[@franckngoubounkou9930]

😊Bien expliqué ça me décourage même de faire du css tuto car y a des goat comme toi .

[@BaNdong-q2o]

Bonjour et merci beaucoups j'ai réussi à le faire grâce à votre tuto .

[@bobhakugei471]

vraiment cool tes videos , je suis étudiant en premiere année . tes explications sont claires ....MERCI !!!

[@LiveCodeofficiel]

😀

[@hiimifranco2840]

Thank you, i dont understand nothing about french but i got all the message! Hi from Venezuela buddy!

[@tayebk6610]

un tuto simple et efficace comme ont les aime merci

[@juvfried1584]

Bonjour, super tuto.. Puis-je avoir le code CSS & HTML ?

[@SoumayaMoumni]

Merci beaucoup bonne explication❤

[@YASSINE_LRCS]

gg legend je te jure c'est colle

[@glodikalala8919]

Merci pour la vidéo. Ce ne serait pas mieux de mettre à notre disposition le code CSS et HTML dans la description ? Car j'ai des difficultés au niveau du mobile-menu.

[@jonathanzadi9571]

rajoute des ";" après les variables dans le script

[@justetk]

You have been a great help. Hello from Azerbaijan.

[@SAMURAI232-u3q]

best video on youtube so far !!!

[@Minia-Elychat]

Salut et encore merci pour cette vidéo très intéressantes j'aime bien ton style de vidéo et de contenue il permet d'évoluer et de mieux comprendre certaines choses. :D

[@Soukouna4252]

Ravi de te revoir mec et merci pour le tuto

[@LiveCodeofficiel]

😀

[@christophemillot5541]

Merci beaucoup. Je m’abonne direct !

[@cyriledouard9848]

merci pour cette video une fois de plus simple a comprendre et a reproduire pour des projets

[@LiveCodeofficiel]

😉

[@JVMMY7]

Ça faisait longtemps, content de te revoir 🙂

[@LiveCodeofficiel]

👋

[@cyrice1890]

Bonjour, merci beaucoup pour cette vidéo. J’ai étudié et reproduire la même chose c’est magnifique. Seulement j’ai essayé d’avancer en y ajoutant des paragraphes et autres. Enfaite quand on est sur mode pc tout va bien mais en mode téléphone les écritures de paragraphe sont superposés au contenu du menu principal ! Vraiment je me sent limité. Merci beaucoup

[@chasseur7360]

Excellente chaîne pour apprendre et se perfectionner au code ! Merci !

[@law1928]

+ de vidéo comme ça !

[@domeshow]

My Boss is de retour 😁

[@LiveCodeofficiel]

😅

[@alexandrecampan3728]

Le retour de Live Code !!

[@LiveCodeofficiel]

Ça faisait un petit moment en effet 😌

[@melissa8560]

@@LiveCodeofficielet on attend ton retour aujourd’hui !!

[@riadchoukairi1895]

Merci !

[@Blackismo]

merci pour cette formation tres instructif😀🙌

[@loshmy0215]

Merci,respect!

[@nanok-mornigstar]

when you’re in the channel rack, click on gms to open up the gms nu, in the light blue screen on the top left look where it says

[@alesmazur7640]

I dont understand france but i like you video! Good luck! cute tutorial

[@LiveCodeofficiel]

😀

[@Alex_3D]

Ouais l'boss 👊🔥

[@LiveCodeofficiel]

😂

[@lawisgui]

Super vidéo, elle m'a bien aidée merci chef

[@omegaaxel5759]

merci beaucoup j'ai tellement appris sur cette videos si tu peux en faire sur les flexbox ça va vraiment m'aider merci !

[@OnSakeez]

très bonne vidéo avec très gros glow up niveau montage, motion design !

[@LiveCodeofficiel]

Merci ! 🙂

[@adriendonnadieux8548]

Salut, super vidéo ! J'ai tout compris 😁 Il ne serait pas mieux de mettre des % au lieu des px afin que ça puisse être réellement responsive entre tout les types d'écrans ? Encore merci 😉✌️

[@LiveCodeofficiel]

Hello, c'est pas forcément nécessaire car on utilise concrètement les PX pour positionner le menu hamburger que sur format mobile donc pas réellement besoin de faire en sorte qu'il s'adapte pour des écrans plus grands

[@theinsanebustle]

Language nahi samajh aayi but content pura dekh ke Sikh gaya

[@maydew]

Merci beaucoup pour tes explications claires et précises ^^

[@carabistouille_]

T'as réussi à reproduire le code ?

[@Romixo_]

@@carabistouille_ Perso Yes

[@abdelkebirelguardi]

Un tuto bien expliqué

[@oliverparis7703]

Salut Livecode, dis moi, tes ressources que tu partages, il y a juste le JS et 2 imgsdans le rar... mais ou est donc passer le code ? xD tu peux les mettre à dispo stp ? Merci

[@karbocrds]

Video incroyable!! Pourrais tu faire plus de tuto?

[@rhayannejoseegangoua1525]

Magnifique tutoriels

[@feelingnether158]

parfait merci beaucoup bien expliqué et très claire

[@Romixo_]

Merci BG !!!

[@Emile-r9o]

Merci pour cette vidéo très utile et bien expliquée, comment pourrait t on adapter ce menu pour en faire un menu déroulant avec des sous catégories ? Merci d'avance !

[@kevinnsapo8711]

très bien expliquer ca m'a beaucoup aidée merci !!

[@MichelMambuku]

Salut, je suis vraiment satisfait de cette vidéo . Cependant, je vous conseillerais plutôt d'agrandir un peu la taille de votre écran car j'ai eu par la suite du mal à voir certains codes. Donc,...

[@rhayannejoseegangoua1525]

Bonjour et merci pour cette vidéo Que faire lorsque le mobile menu fonctionne bien mais lorsqu'on essaie sur un télephonne ça n'apparaît plus ?

[@belhadadhicham6080]

mercii

[@mikedube]

wow ! vraiment beau tuto !

[@serge-olivierouattara6932]

help, I'm definitely starting to get the hang of it. Just thought I'd share.

[@lylypoupou5505]

very helpful and simple man.. i tNice tutorialnk i'm gonna see all your videos

[@trgiahuy1874]

thank you man although i didnt understand such a word you said haha. btw the code has worked so thank you

[@LiveCodeofficiel]

Thanks aha, how did you find my video if you don't speak French? KZbin recommendation ? Google ?😅

[@mohamedamin2329]

very talented teacher - cheers

[@Johnnystar973]

Tuto au top ! J'ai commencé à coder il y à vraiment pas longtemps, Je suis toute tes étapes mais va savoir pourquoi le Blur ne s'applique pas du tout... Si jamais tu as une idée du pourquoi ? (J'ai tout mis exactement comme toi et au même endroit)

[@nightblood1253]

bien explique bravo a toi si tu peux faire une video ou tu crerai un portfolio responsive

[@LiveCodeofficiel]

Peut être pas un portfolio car c'est l'un des projets que je créer dans ma formation mais je vais voir ce que je peux faire. Je pense peut être plus me tourner vers des vidéos moins longues (pas des vidéos de 1h-2h comme avant) mais plus vers des vidéos comme j'ai pu faire sur ma chaine ces derniers temps.

[@TeddyWrestling]

Est-il possible de faire une suite de ce tuto en monrant comment faire pour implementer du texte au dessous de cette navbar et sur l'image en background

[@hanuunshe]

merci beaucoup

[@ziadhamri]

Heee frérot ca fait longtemps que t'avais publie une nouvelle vidéo

[@LiveCodeofficiel]

C'est vrai 🙏😅

[@ziadhamri]

@@LiveCodeofficiel mais t’attends quoi haha?

[@kprirusse4641]

it work on my pc thx bro vеry much

[@NerdjesSouici]

please comment ouvrir le fichier de programme!

[@skewridg356]

Salut LiveCode Merci pour tout , très bien expliqué mais mon image ne veut pas se mettre en sous les boutons de la navbar , elle se met plus bas sur la page meme apres vérifications du code

[@juleszanardi1140]

Merci beaucoup, super tuto

[@yumikolikeit7782]

Carrément top.... merci

[@Squ4Moony]

Un tuto superbe ! Merci mec

[@mezhgansaadat3145]

I really like how you did work on this responsive Navbar . Can you make such a great video in English too?

[@cristellea]

Bonjour, la propriété backdrop-filter n'est plus prise en charge par la plupart des navigateurs depuis 2021... des alternatives? :)

[@LiveCodeofficiel]

Hello, si si je te confirme qu'elle est bien prise en charge par les dernières versions des navigateurs les plus communs 🙂 : caniuse.com/?search=backdrop

[@cristellea]

@@LiveCodeofficiel Merci pour ton retour !

[@fur02687]

Limpide ! Merci

[@AndryFushicho]

Bonjour, superbe vidéo, clair et simple ! Serait-il possible de faire une vidéo nav responsive mais avec un bouton recherche et un bouton connexion en plus? J'avous que je trouve ça super compliqué . Sinon c'est top !

[@LiveCodeofficiel]

Ce n'est pas très compliqué pour ajouter un bouton de connexion, il suffit de styliser une balise avec du CSS, par contre pour qu'il fonctionne réellement et que l'on puisse accéder à un espace dédié à son compte il faut se pencher sur le backend, ce que je ne fais pas. 👍

[@AndryFushicho]

@@LiveCodeofficiel Oui je comprends pour le backend, ce n'est pas un problème. C'est juste que quand je veux ajouter un bouton recherche et connexion, j'utilise space around, et à ce moment le responsive se casse la figure 😂 parce que j'ai directement un logo avec une dimension précise je pense. Mais je vois plus où moins le truc. Merci encore

[@yeskouyesko3079]

Merci infiniment

[@ismailiakmalsaid3572]

Trop génial

[@daniel_youtubechannel8717]

Trop cool 👍

[@assiabensaada1852]

merci bcp pour la vidéo j'avais besoin de savoir comment mettre le background color en transparent et la je comprends mieux merci bcccpppp. Est t-il possible de mettre des vidéos avec Bootstrap svp?

[@dlooz7058]

C est quoi ton logiciel de développement si visuel studio code quel extension

[@Kisaho]

Hey, petite question tu utilises quoi pour changer de format (de pc, à iphone 12 pro par exemple). Merci !

[@LiveCodeofficiel]

C'est le dev tool de google chrome que tu actives en faisant clic droit -> inspecter élément

[@alexandernassar6619]

Really amazing. Thanks

[@Adimarcel2006]

salut ! je n'arrive pas à inclure "@media screen and (max-width: 900px) { }" dans mon fichier .css ( il me le marque comme erreur). merci d'avance !

[@damienibi-mossot]

salut a toi le codeur ca va faire déja plus de 2 ans et demi que je suis tes tutos qui sont très instructif mais je ne suis toujours pas abonné parceque je voudrais que tu me reponde ,comment a tu apris toutes ces propriétés , ces balises et autres ,dans une école ?

[@Blunty94]

Salut et merci beaucoup pour tout ce temps que tu passes pour nous faire découvrir tout ca. Chez moi ca fonctionne, je suis happy :-) Par contre je me demandais, il y'a t'il un moyen de changer l'image du menu hamburger une fois le menu ouvert afin de le remplacer par une croix pour indiquer à l'utilisateur que c'est ici qu'il doit recliquer pour fermer le menu s'il veux finalement rester sur cette page? Encore merci à toi.

[@alisterflandrinck3560]

Salut, sur quel logiciel tu conseillerais de coder ?

[@LiveCodeofficiel]

Visual Studio Code !

[@LennyChanrion]

La vidéo était super cool merci , mais je me demandais , ça aurait pas été mieux de laisser le menu hamburger en position normal pour l'aligner directement avec le titre 'Adventure' ?

[@LiveCodeofficiel]

à mon goût, la solution propre aurait été de peut être mettre le menu hamburger dans la navbar en display: none; à la suite des liens cliquables afin que celui-ci reste aligné avec "Adventure" sans même avoir besoin de faire des ajustements. Cependant, lors du scroll, le menu hamburger serait resté en haut si l'on ne met pas de propriété fixed à la navbar

[@FansdeBernardWerber]

Salut, merci pour cette vidéo... J'ai bien réussi à reproduire la Navbar... Serait-il possible de donner un cours sur le responsive concernant les images superposés ? Car parfois, je dois superposer des images, et il est assez difficile de les rendre responsive.

[@frostjhon5905]

Tu dois pouvoir régler ce problème dans CSS grâce au @layer, il y a un paquet de tuto pour s'en servir

[@FansdeBernardWerber]

@@frostjhon5905 Merci

[@betelgeuse6388]

Thank you so much for this tutorial.

[@lvt2665]

Bonjour ! Grâce à tes vidéos j'ai décidé de me réorienter dans le développement web (front end pour commencer) et pour cela je dois faire remplir un questionnaire pour connaître un peu plus le métier, j'aurais aimé savoir s'il était possible pour toi de le remplir ? Si tu n'as pas le temps c'est pas grave en tout cas merci pour tes vidéos et continue comme ça c'est top !

[@young_bounty_8752]

Meilleur tuto ever. Merci pour cette magnifique vidéo

[@uikielle]

Très bonne vidéo! Quel est ta playlist des musiques de fond ?

[@LiveCodeofficiel]

Très bonne question, à chaque fois je prends des musiques libres de droits un peu aléatoirement sur des sites avec comme thème "Lofi / Chill Beat"😅

[@Music-fg5dd]

Ca régale

[@noahlegras2002]

Excellent tutoriel. Sur cette meme base, ca serait possible d'expliquer comment faire un menu déroulant ? Quand je passe sur le support par exemple, que des sous parties s'affiche. Merci :)

[@MaxoYtb_]

Bonjour j'ai une question C'est quoi comme visual studio ( un lien peut etre ? ) et le lien de la page