Responsive Navigation Bars

1

Hey all! I’ve learned a lot since making my portfolio page and so I’m making another one for a fresh start. I want to make a responsive navigation bar like the one in this guide on w3 schools. As of right now, I have a page that has a navigation bar with several links on the top, and those links disappear when the page is narrower than 600px. But at that point an icon is supposed to appear, and when that icon is clicked, it reveals all the other links that disappeared. I have never done a navigation bar with this sort of functionality before so I’m feeling a little lost, I’d appreciate it if someone would be willing to take a look and see what I might be missing.

LInk to my pen

Thanks!

2

Hi KayDeeJay,

Your media queries mention an .icon class, which doesn’t exist in your code. Change this to .nav-icon and your pen should work (I would also use .nav-icon in your not() selector). E.g.:

@media screen and (max-width: 600px) {
  .nav-bar a:not(.nav-icon) {display: none;}
  .nav-bar a.nav-icon {
    float: right;
    display: block;
  }
}

Also: fCC has a good course on Bootstrap as well as CSS in general. https://www.freecodecamp.org/challenges/use-responsive-design-with-bootstrap-fluid-containers

EDIT: just noticed that your 2 media queries are identical:

@media screen and (max-width: 600px)

so you could just merge them: https://guide.freecodecamp.org/css/media-queries

1 Like