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

Подписаться 12 тыс.

Просмотров 38 тыс.

50% 1

Turn the default Navbar toggler in Bootstrap to a custom animated icon to add some flare to your next web design.
Oh and easy math too! I promise.
Purchase & Download the source code:
buy.stripe.com...
** 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/hay...
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
P.S. It's still easy math ;)
How to Build the Navbar in Bootstrap 5:
• Bootstrap 5 Navbar Tut...
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerw...
ADWC Pro provides you with:
• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!
Price:
Just $6/mo. or $49/year (32% off monthly)
-------
Got a question for me?
adesignerwhoco...

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

@ADesignerWhoCodes 2 года назад

** 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 2 года назад

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

Thank you so much!

@SharvinKhanal 4 месяца назад

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.

@NotPolloz 2 года назад

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

@ADesignerWhoCodes 2 года назад

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

@gabrielmadej3196 2 года назад

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

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

You are the best! Take my up vote!

@ekikei Год назад

you just saved my school project, thank you

@venugopal-in6im 2 года назад

Thanks alot for the clean and beautiful code

@ADesignerWhoCodes 2 года назад

You are very welcome.

@venugopal-in6im 2 года назад

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

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

Thank you so much!

@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

@abdulbasitsalah2918 Год назад

thank you, sir, it really helped me.

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

Thanks! This really helped.

@md.arifhosain3461 3 месяца назад

Excellent♥

@cecileniess9003 2 года назад

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

@AhmedKhaled-fk2zc 2 года назад

This helped me so much, thanks alot!

Год назад

Thanks for this amazing tutorial !

@jeevankamble9791 Год назад

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

@lehlohonologlenton2680 2 года назад

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

@retoulrich3137 2 года назад

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?

@ShuvoMallick Год назад

Thank you

@danielj6394 Год назад

Thanks

@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.

@creacionesbrunila Год назад

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

@geniusbrother2234 2 года назад

for giving the code i subscribe you.

@maciejpawlik5821 Год назад

This one i awesome, thank You

@ADesignerWhoCodes Год назад

You are so welcome. Glad it helped ya.

@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.

@shazimulkaif1103 2 года назад

love it

@ADesignerWhoCodes 2 года назад

You are so welcome.

@kingasaurio3597 2 года назад

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

@dafera 2 года назад

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

@kingasaurio3597 2 года назад

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

@ADesignerWhoCodes 2 года назад

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

@MRPIANO-my1kt Год назад

awesome 👍

@nerdycoder23 Год назад

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

@ClippyWulf 2 года назад

thx for the insight :D

@ADesignerWhoCodes 2 года назад

You're very welcome.

@kingasaurio3597 2 года назад

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

@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