Responsive Navigation Bar Only CSS | Mobile First Design

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

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

50% 1

Hamburger Button to Close Icon Tutorial: • Hamburger Menu to Clos...
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this video I go over how to create this Navigation Bar using only HTML and CSS. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Flexbox for the layout and initially I create the mobile view. I show you how to include a hamburger icon that changes into a close icon. For the desktop view I add media queries and transform the layout.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: codepen.io/angeladelise/pen/p...
In this video I show you:
0:00 - Intro
0:15 - Starting HTML Code
0:41 - HTML Code
3:44 - CSS Code - Mobile View
12:01 - CSS Code - Desktop View
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Наука

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

13 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@psilocybin- 2 года назад

I remember I watched your Responsive CSS Grid Tutorial right at the beginning of my CSS learning journey, like a year ago. I loved it as it really made me understand the concept behind it. For some reason and never got to see any other video from you (I was already subscribed) until now that randomly bumping into this video. The way you explain things is very good. So I'm gonna be checking your other videos, I'm sure I'll find some gems. So thank you in advance :)

@erinhalden2019 Год назад

This is so simple and straightforward! It's easy to go in and add other stylings to it if you want to, but if you are just trying to learn the basics of this functionality, this is fantastic.

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

Thank you sooo much for this tutorial! I've been searching everywhere for how to do this with only HTML and CSS.

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

Una genia total, explica increible y va al grano, sin vueltas ni complicaciones. Hace que lo complejo, se vea simple! Gracias totales!!

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

Such a great video. Learned a lot and implemented it myself on an application I've built. Thank you!

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

God bless you! I could not wrap my head around how to do this, you made it super simple and clear, thanks so much!

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

Thank you so much! Your explanation was so simple and clean, and the outcome easily understandable, that saved me a lot of time and effort. You earn a new follower Angela! Have a great week!

@techno_abhishek8982 3 года назад

Great, Cleanest HTML CSS Navigation. Gonna use it for my portfolio website, You explanation is very clean. Good Teacher

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

I like your teaching style, well done. I learned a lot. I'm looking forward to more great vids.

@mininusequeci Год назад

Thanks again!

@valentina-buoro 2 года назад

Super tutorial. Thanks for this!

@go-j 2 года назад

Great video!. Learnt a lot here :)

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

Thank you, this has helped me a lot!!!

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

sis you saved me so much time!!!!!!!!!!!!!!!!

@Ab-cj6gl 3 года назад

Oh my God this channel is literally saving my life Thank you so much I'm not that advanced but I already have real projects to finish and this channel is just making life easier thank you so much

@angeladesign737 3 года назад

Thank you so much!

@Ab-cj6gl 3 года назад

@@angeladesign737 🙏🙏

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

Great video, thanks for sharing!

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

Thank you Angela!!!

@muhtasimmusfiq3213 3 года назад

you are a great teacher , mam.

@onmarx7877 3 года назад

I did a similar one yesterday, OMG Thanks!!! You help me a lot to keep improving ♥️♥️♥️ Thanks Angela

@angeladesign737 3 года назад

Glad it was helpful!

@fr3847 3 года назад

Awesome and eloquently simple as always

@angeladesign737 3 года назад

Thank you!

@geryardmon7523 3 года назад

Beautiful!!! Thank you :)

@angeladesign737 3 года назад

Thank you so much!

@pratyushbaxla1366 3 года назад

Thanks!

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

This video is well explanatory and I would like to practice it on my own. How can I get the svg files for the menu and close button?

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

hi i cant understand to adding icon how you do that? did you link from some were else directly? or we can add image?

@villas9721 3 года назад

Thanks bratan

@fingerprinz 3 года назад

Thank you for your great tutorials. Very helpful. Question: The above navbar does not work in Safari 14.1. Can you guide me to a hack so it does? Thank you!

@sankaranarayanan7847 3 года назад

I've made one simmilar to this last week..👍 good job

@angeladesign737 3 года назад

That's great!

@olivers3804 Год назад

Hello! I have just started studying html an css and I'm trying to do this for an essay I have, but without the logo. But instead of a border-bottom I want a background-color. But as soon as I set display: none; to the li-tag to make the menu disappear, the background-color disappear as well. When I try it with the border-bottom it goes all the way to the top, like the nav doesn't take up any space. When I try to change the height of the nav, it works, but men I open the menu it stays the same, I want it to follow like in your video. How should I do it? So I want it to be one height when the menu is closed and when I open the menu I want it to follow. Thank you! / Cassandra

@cristinadelise 3 года назад

GREAT!!!

@angeladesign737 3 года назад

Thank you!

@mohankumar349 3 года назад

Wow...great tutorial.

@angeladesign737 3 года назад

Thank you!

@pyshorts315 3 года назад

Very very helpful. Thank you mam.

@angeladesign737 3 года назад

Glad it was helpful!

@quacquac_quacquac 3 года назад

Love it 😍😍 thank u ahh 💕💕

@angeladesign737 3 года назад

Glad it was helpful!

@quacquac_quacquac 3 года назад

@@angeladesign737 💕

@ozanpress 3 года назад

What about closing the menu when one of the links on the list is clicked? Can you do this with CSS?

@michelgirala2829 3 года назад

Thank you Angela ♥️♥️♥️

@angeladesign737 3 года назад

Glad it was helpful!

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

Thank you so much applied and functional on my own website you're a life saver

@peteozols22 3 года назад

In practical use the menu options for the desktop navbar and smaller device navbar are not identical. You end up making 2 separate navbars and just hiding/displaying the entire navbar in css. Although you duplicate your navbar, it is much easier to manage in the long term.

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

I like this approach much better. Especially since im assuming you're not using a framework like bootstrap, your site is still many times faster than the bootstrap variants

@psilocybin- 2 года назад

It depends what kind of navigation are you going for. If you're going for something similar to the one show by Angela. I would 10000 times rather just use ONE navigation and avoid the extra markup. Less is more.

@salsea 3 года назад

Please can you show us how to work with Git & Github in VSCode through Window 10 - not Mac, thanks

@mushroom585 Год назад

How do you keep the menu from pushing content down when you open it in mobile?

@xizinpinglo7862 Год назад

Thank you I can't see latest video from you hope you are doing okay you really helped me to learn most of things

@salsea 3 года назад

Great, presentation..

@angeladesign737 3 года назад

Thank you!

@Sammorris207 3 года назад

Hey there I have a doubt, I have seen in some tutorials where for all elements, padding and margin are made zero. But why did you do that for the before and after content too. Can you please explain? Thank you!

@angeladesign737 3 года назад

I add the *::before and *::after just incase I add any pseudo elements they will also have a margin and padding set to 0.

@enriqueruiz320 3 года назад

Eso es belleza

@ega706 3 года назад

your voice is beautiful

@Andu_Bricks 3 года назад

That is really awesome and well explained. Can you also elaborate further how to add a drop down to the menu?

@angeladesign737 3 года назад

Hi Maurice! I have this tutorial on how to create a dropdown navigation menu: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nhlF3wRPkug.html

@Andu_Bricks 3 года назад

@@angeladesign737 Hey there yes I went through that one as well. But currently am trying to figure out how to combine the drop down with this responsive / mobile friendly one. As the other one is not responsive. Thx. Btw for taking the time to respond.