Animated Custom Hamburger Icon in Navbar in bootstrap 5 (with a gradient)

[@ADesignerWhoCodes]

** Whoops! I made a mistake ** Head's up everyone. I made an error in my coding. This version works in Chrome but not Safari. Here's the patch for it: github.com/haydn5/animated-navigation-safari-fix/blob/main/custom.css The error was using margin-top instead of position: absolute and then top. I've provided the files gratis via Git Hub. Kudos to a subscriber for pointing out the error. Thanks, Haydn

[@brosquadyt4391]

This is also not working brother.. Please make sure once again and can't we build this for all web browsers with same code?? I'm new here.. Help me out thanQ 🙂

[@philippenewman]

Urgh. I don't have browserstack, nor a mac at the house. LOL. I'm surprised either version of your CSS would conflict with Safari. Hoping the updated one works. :||

[@andohfrancis9353]

Thanks

[@tektektuktuk4086]

is this the best way to make toggle icon?

[@RobertSebestyen-dk1gq]

BUG spotted: if you click the toggler icon and then refresh the page it refrehes to a collapsed navbar with a X icon. Solution: . You need to write the class name "collapsed" in "button line".

[@kruzM18]

Thank you! this helped me!

[@robyngalea]

Thank you, I had the same problem and was hoping someone had mentioned this. Your fix fixed my problem too.

[@teodorgorka]

Thanks for the effort, I wouldn't figure it out! :)

[@jamescyber5075]

Thank you so much!

[@SharvinKhanal]

thanks

[@philippenewman]

I'm grateful that my 10 years dated web education allows me to actually follow along with this. ;D Great tutorial!

[@ADesignerWhoCodes]

You are very welcome.

[@lachlanwilliams5818]

You are the best! Take my up vote!

[@ekikei]

you just saved my school project, thank you

[@NotPolloz]

Thank you for making this video! Saved me a lot of time.

[@ADesignerWhoCodes]

You're welcome Rayhan. Glad to hear it helped.

[@venugopal-in6im]

Thanks alot for the clean and beautiful code

[@ADesignerWhoCodes]

You are very welcome.

[@venugopal-in6im]

@@ADesignerWhoCodes Can you please tell me how can i be a good web developer, Thanks in advance

[@gabrielmadej3196]

Thank you for your help. I have just gotten started with bootstrap.

[@lehlohonologlenton2680]

On iPad the toggle button is just a single line, how one fix this issue?

[@kingasaurio3597]

What do you mean by things getting in the way around 6:00?

[@creacionesbrunila]

no hay forma de hacerlo con : ? que sea mas facil ? y solo con boostrap ?gracias

[@madushandesilva142]

Thanks! This really helped.

[@retoulrich3137]

Thank you, it works wunderful. How must the CSS be extended if I still want to do the following: When the button is clicked, I want the navbar to go to the full width and full height of the browser window, the background color (now gray) to be orange, the transparency of the background round to be 50% and the background behind the navbar to be blurred. If the toggler icon doesn't appear (expand-lg) the navigation should stay as it is, horizontally side by side. I tried so many things, but nothing worked. Can you support here at best?

Thanks for this amazing tutorial !

[@abdulbasitsalah2918]

thank you, sir, it really helped me.

[@AhmedKhaled-fk2zc]

This helped me so much, thanks alot!

[@md.arifhosain3461]

Excellent♥

[@kingasaurio3597]

What do you use to change to mobile view? ctrl+shift+i to inspect right? But it doesn't give me mobile view.

[@ADesignerWhoCodes]

I do control + click and inspect to get mobile view. Their could be an additional keyboard shortcut

[@jeevankamble9791]

I am very happy sir 🤩🤩🤩thank you, sir❤❤❤

[@jamescyber5075]

Thank you so much!

[@cecileniess9003]

Merci pour votre vidéo cela ma énormément aider :)

[@kingasaurio3597]

I feel like I missed something. Is middle-bar something from bootstrap or css?

[@Adnan_19946]

BUG spotted: if you click the toggler icon and then refresh the page it refrehes to a collapsed navbar with a X icon

[@ADesignerWhoCodes]

Ya. I put in a fix in the comments. It's tricky one. And I don't know if Bootstrap might change the setup.

[@nerdycoder23]

I tried the exact code but it didn't work, anyone faced same issue like me ?

[@briseisselene3042]

Hello ! for me ".navbar-toggler .middle-bar { opacity: 0; filter: alpha (opacity=0); }" doesn't work at all, help me please ?

[@dafera]

Great video man, but i wanted to make the menu to only appear when i click the button, this way the button only appears if i minimize the page

[@danka-video]

.toggler-icon { display: block; position: absolute; height: 3px; width: 100%; background: $white; border-radius: 1px; left: 0; top: 10px; transform: rotate(0deg); transition: .2s ease-in-out; } If you put top: 10px ; it looks much better when its switch from hamburger to X. Anyway THX

[@ShuvoMallick]

Thank you

[@manuict4916]

Hello congratulations for tutorial can you do another tutorial like this and try menu completly different. For example menu shape circle button and widescreen menu. Or side menu etc. Because I would like to create different menu.

[@MRPIANO-my1kt]

awesome 👍

[@essentialaffiliatemarketing]

Great video, but instead of using opacity and filter on the middle bar why not use display none?

[@ADesignerWhoCodes]

That also works. I just went with opacity in this instance.

[@geniusbrother2234]

for giving the code i subscribe you.

[@supratimchoudhury1492]

sir with due respect i thought you would explain the individual terms and not just write those classes without explaining what those terms really meant.. what does navbar toggler, data bs toggle collapse means??????????????????? HOW THESE CLASSES INTERACT WITH EACH OTHER TO GIVE THE HAMBURGER MENU ITS EFFECT ? and what are the functions of these classes : - WHAT NAVBAR COLLPASE IS DOING AND WHAT COLLAPSE ROLE IS? SIR CAN YOU KINDLY EXPLAIN IN ANOTHER VIDEO THE ROLES OR FUNCTIONS OF THESE CLASSES SO THAT THEY DONT APPEAR AS FOREIGN LANGUAGES TO ME??? THANKS

[@shazimulkaif1103]

love it

[@ADesignerWhoCodes]

You are so welcome.

[@maciejpawlik5821]

This one i awesome, thank You

[@ADesignerWhoCodes]

You are so welcome. Glad it helped ya.

[@ClippyWulf]

thx for the insight :D

[@ADesignerWhoCodes]

You're very welcome.

[@danielj6394]

Thanks

[@omidhabib7453]

🌹🔥

[@raimundoneto4557]

nice..

[@Pongant]

_hacks bootstrap_