Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

30
50



This free design and web development course will use Flexbox and basic HTML to create 3 different navbar designs. You’ll see some examples of how Flexbox properties like ‘align-items’, ‘justify-content’, and ‘order’ can be used to quickly spin up new web designs.

This series is intended as a project-based course and will not go in-depth into HTML, CSS, or Javascript. If you want to learn more about those check out the links at the bottom of the description.

📂 COURSE FILES 📂

🔗

⏰ TIMESTAMPS ⏰

Navbar 1: 0:22

Navbar 2: 10:18

Navbar 3: 11:58

✅ USEFUL LINKS ✅

🔗 A Complete Guide to Flexbox:

🔗 Google Fonts:

🌟 TOP RECOMMENDED COURSES 🌟

CSS

(Paid) Build Responsive Real World Websites with HTML5 and CSS3

(Free) CSS Crash Course For Absolute Beginners

CSS GRID

(Free) Flexbox CSS In 20 Minutes

(Free) A Complete Guide to CSS Flexbox

CSS FLEXBOX

(Free) CSS Grid Tutorial

(Free) A Complete Guide to CSS Grid

JAVASCRIPT

(Paid) The Complete JavaScript Course 2019: Build Real Projects!

(Free) Learn JavaScript – Full Course for Beginners

🔔 SUBSCRIBE 🔔

👋 FOLLOW US 👋

INSTAGRAM:

FACEBOOK:

Nguồn: https://quydinh.com

Xem thêm bài viết khác: https://quydinh.com/cong-nghe

30 COMMENTS

  1. Hi ! I'm a beginner on developement, can you explain me how to do responsive design on mobile for this navbar ? Sorry for my english haha ! Thanks !

  2. my logo kind of appears ontop of the navbar? how do I make it be next to it?
    edit:
    my logo img was inside <nav>. it was fixed when I placed it before <nav>

  3. Great video, love it !
    Just a question, i just wrote my own bar and i can't write content on the actual page, right under the navbar ! What do i have to do ?

  4. Sorry im new at css. Why do you establish cursor:pointer; at the .logo and it affects the list as well as the button? Shouldn’t it be ONLY affecting the font logo?

  5. Great job !
    I have a better sense of how to make logo and nav links on seperate sides of the page without having to do hacks.

  6. in example 1 'li' items are not responsive once you downsize the screen: they will appear not justified.
    Grid solved it for me (I'm a noob, prob we can use flex too..) .

    .nav__links {

    list-style: none;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    }

LEAVE A REPLY

Please enter your comment!
Please enter your name here