Why is my nav bar keep overlapping with my image when I adjust my screen size?

[alee62580]

My website looks good at first glance however, the nav bar (on the right) overlaps my logo when I adjust the screen display to be small. (I believe this occurs because of the logo size , position, and flexbox I’ve been struggling for 2 weeks and am not sure how to fix this problem yet) .

https://codepen.io/2bumb/pen/mdorWBb

[DobarBREND]

Welcome to our community!

What you need here is the proper approach to the responsive web design:

Responsive design - Learn web development | MDN

All html elements that don’t fit properly to the size of a certain screen, should be adapted to that size.

[estebankra]

You can reduce the size of your logo (500x500) by removing all white space, because that causes most of the problems you have with positioning the logo on the page…

So for example, your image can only have a size of 334x100 like this

Then you don’t need to use position: absolute and some of the other attributes. Here are the classes I changed to do the result below.

.navbar {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 250px;
  height: auto;
  cursor: pointer;
}

.navbar ul {
  list-style: none;
  text-align: right;
}

But for small screens you maybe should use something like a dropdown to show the links when the user opens it

[alee62580]

I appreciate the assistance now adjusting the screen looks great. I’ve made similar values for .navbar, .logo, and .navbar ul prior to making this forum, however
when I changed the size of the logo, the nav bar and logo kept going to the middle when I intended to only make my logo bigger. I used absolute and flex-end to stop this occurrence(which wasn’t the best decision ).