Nav on top of Image?

HTML-CSS
#1

Hello!

I’m trying to figure out how to put my menu, on top of the header image i have added.

So far this is what i got

https://codepen.io/Niqqo/pen/MWWgazK

Im not sure what to write in CSS to make this happen, also have forgotten something in the HTML file, or is this OK for this to work?

Cheers… :slight_smile:

#2

Try this link: https://www.w3schools.com/howto/howto_css_navbar_image.asp

#3

Hello!

Yes i have read that, but i wonder is it a must to add the image in the CSS file? I can’t do as i have done and added it via the HTML file?

Thanks

#4

It’s like a fench
The wood is HTML
the paint is CSS
Now can you answere if it indeed should go in the CSS? if not try going trough the lessons here one more time :3

#5

I guess it makes sense. I just took a break so i hope i see more clearly now. Cheers.

#6

Can i ask another question.

I have a wrapper that is 960px width. And i have added 3 boxes inside, but when i display flex on the div containing these 3 boxes they don’t stretch 33.333333333% each… do you know why?

#7

yes but it is a bit hard to explain since it has to do with axis. If you ever had math then you know that when you had a value u had to place it onto an x and an y axis. anyway i posted a link that will help understanding how it works. Do keep in mind that you always can give the boxes an position of absolute :3 to counter other elements images that might be in the way

#8

If you are referring to this pen (when adding back the HTML), then the boxes are evenly divided over 980px minus the border around the container (so they are 318px each and not 320px).

If this is not your question please make a Codepen with some example code.

#9

You would want to have your css look something like this:

header {
    background: url('images/background1.jpg') no-repeat center center/cover; 
}

<header>
    <nav></nav>
</header>
#10

Thanks for your answers, i finaly got it to work. I called it a day yesterday and this morning it took me 10 minutes to understand flex a bit more, and i know how the menu on top of my image. Thanks a lot for all who answered!! :slight_smile:

Really appreciated. :slight_smile:

#11