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

Hi, so I was trying to do the Build your Own Cheatsheet project for the HTML/CSS lesson.

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 avail.

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!

Hi, there!

Welcome to the forums!

Was this what you were looking for?

If so, you can apply flex to your .menu class and align-items: end; and remove the top and bottom padding. If not, could you show me an example of what you’re looking for? :slight_smile:

And your header is actually not experiencing an opacity problem; it’s actually going behind the table, which is making it look opaque. Can you remember which property is used to make elements appear above others? :eyes:

Omg, that finally fixed it!! :sob: :sob: :sob:
Thank you so much!!! That’s exactly what I had in mind!
And yes! Just gotta put the z-index: 1 on the nav-container. Thank you so much for your help!!
It makes sense now that you explained it.

I have another question though.
Why is it that the display:flex isn’t applied automatically on .menu when I already put it on its parent (.nav-container)?
Or is it that we’re not supposed to put it on the container, but on the content instead?

So, when flex is applied to a parent element, it makes its children flex items. The flex property is not inherited.

Also, silly me, but on .menu you originally had align-self: flex-start; If you remove the align-self from .menu, you can use align-items: end; as well.

I see! I thought whatever property applied to a parent element will always be automatically applied to each of its children. Thank you for clearing this up and for the help!! :smile:

1 Like