0

I really need your help. It's probably not difficult but for me as a beginner it is. Here is my code that I have:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

header {
  display: flex;
  width: 90%;
  margin: auto;
  position: relative;
  align-items: center;
  padding-top: 10px;
}

.logo-container,
.nav-links {
  display: flex;
}

.nav-links {
  justify-content: space-around;
  list-style: none;
}

.nav-link {
  text-decoration: none;
  color: green;
}

img {
  max-width: 100%;
}
<header>
  <div class="head">
    <div class="logo-container">
      <img src="auge.jpg" alt="zum Üben">
    </div>
    <nav>
      <ul class="nav-links">
        <li><a class="nav-link" href="#">Startseite</a></li>
        <li><a class="nav-link" href="#">Produkte</a></li>
        <li><a class="nav-link" href="#">Mein Konto</a></li>
      </ul>
    </nav>
  </div>
</header>

This is what it looks like at the moment. (See picture below)

enter image description here

And here's how I would like to have it (Also picture below)

enter image description here

2
  • 1
    Use a background image? or position the nav absolutely.
    – Paulie_D
    Jun 20, 2019 at 14:43
  • body { background: url('auge.jpg'); }
    – Daan
    Jun 20, 2019 at 14:58

1 Answer 1

0

You could assign a background-image to a parent element, therefore, all the child elements would appear in front of you background.

Another possible solution would be using z-index: https://www.w3schools.com/cssref/pr_pos_z-index.asp

.header{
width: 100%;
height: 500px;
background-image: url("https://dummyimage.com/200x200");
background-position: 50% 50%;
background-size: cover;
}

.header{

display: flex;
flex-flow: row nowrap;
justify-content: space-between;

}

.item{
font-size: 20px;
cursor: pointer;

}
<div class="header">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.