How to vertically align an image, an h1 homepage title, and menu list on a navigation bar?

HTML/CSS
1

First, here is the codepen link:
https://codepen.io/606-/pen/OJBGEPz

So I want to put:

  • An image
  • An h1 homepage title
  • A bunch of links
    for my navigation bar on the header.

I want them all to be vertically aligned at the bottom of the header, with the image+h1 on the left side, and the menu list on the right side.
I’ve been playing around with the floats, display type, flexbox, etc, but still just can’t figure out how to make the menu list aligned to the bottom.

I somehow manage to get the the image and h1 in the right place, but the menu list just won’t align at the bottom, aligned with the image & h1 no matter what I tried.
I tried editing the menu container using margin, padding, align-self with no change.

I’ve been searching for answers on google and trying it myself for hours still with no answer on what I did wrong.

Also, if you resize the window and scroll down, you’d notice that somehow the header’s opacity is not 100%.
I did make the background-color into an rgba before, but I changed it to rgb afterwards, but the opacity still doesn’t change back to 100%.

Would totally appreciate it if anyone could tell me what I did wrong and what the right properties that I should use are for these problems.

Thank you in advance!

2

Can you draw a picture of exactly you want to do? Using canvas or even the drawing software print?

2 Likes
3

image
image1151×804 89.4 KB

2 Likes
4

Really sorry for the late reply!
This is what I had in mind:

1
11865×409 33.7 KB

I finally found the solution though! Turns out I just have to set the .menu’s display to flex, and align-items to end. :slight_smile:
Thank you for taking your time to reply!

5

Thank you for taking your time to make that!! That makes it easier to understand.
I was really confused before, because I thought that whatever properties put on the parent will be automatically applied to its child and grandchild elements. Now that I think about it again, that was pretty stupid too, because then all the style applied to ‘body’ element for example, would’ve been applied to all its child/grandchild haha.

Seeing that diagram and your explanation confirmed my suspicion that I misunderstand it, so thank you so much for the explanation! :smiley: