Kevin Powell - Community•13mo ago

NavBar with flex not working

I have a problem with getting my navigation bar working for large screen sizes. https://andrewteece.github.io/walthome-real-estate-site/ https://github.com/andrewteece/walthome-real-estate-site I have tried several different things and still not working. Any suggestions would be much appreciated. Thanks!

Wealthome

Real estate website

GitHub

GitHub - andrewteece/walthome-real-estate-site

Contribute to andrewteece/walthome-real-estate-site development by creating an account on GitHub.

8 Replies

Kasenom•13mo ago

Hello Andrew! I'm also learning so here's my shot at it. So at the end where you have a media query with the min height of 992px, inside of the query you need to add apply display: flex to your main__navbar--list.

  .main__navbar--list {
    display: flex;
    align-items: flex-end;
  }

  .main__navbar--list {
    display: flex;
    align-items: flex-end;
  }

here's what I added, and this is the result.

AndrewOP•13mo ago

Thank you for your help!! I did what you mentioned but it does not seem to work for me.

clevermissfox•13mo ago

Min-height or min-width? What do you want it to look like on large screens? Can you screenshot what you’re seeing and let us know what you want it to do?

Kasenom•13mo ago

woops yes you're right it's this one @media (min-width: 992px) {

AndrewOP•13mo ago

clevermissfox•13mo ago

Ah yes you’ll need a row directly on the ul or div that’s holding the page titles , so @Kasenom is right about needing flex Make sure your media query is using min-width not height

AndrewOP•13mo ago

I have @media (min-width: 992px) The nav is still not horizontal Thanks all for your help!

clevermissfox•13mo ago

In your css, you have the selector .main-nav--list and in your html, its called .main-navbar--list

Gaming

Programming

NavBar with flex not working