Adding logo into nav bar

1

I’m struggling to add a logo image to my nav bar, I think i have the nav bar formatted how I want it, but the image is just appearing above it. I contained them both inside the same header tag, but they still appear not synchronized.

Link: https://codepen.io/daniel-albano/pen/RwbGXEB?editors=1100

2

Your logo is in the header, and so is your nav div. If you want the logo in the navigation, I would take the logo div and place it in your nav-bar container. With that said, to start aligning them correctly, I would use the flex property on the parent container so you can align them both in the center.

Also remove all the background color in your a, li, and ul. And add that background styling to the main nav container itself, which would be nav-bar. So something like this.

#nav-bar {
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
1 Like
3

Thank you very much for the clear instruction!

4

You’re very welcome! Glad I could be of help.

1 Like