Responsive image over a responsive sidebar

Question

I am a total newbie in web design and css so excuse my ignorance. I'd like to add a responsive image as a header (only for large screens) over a responsive sidebar in my first site. I'd like the header and the sidebar stay stable and the text content roll under the header. I used position:sticky for the header but I think that it's a silly solution because when I click on links the correct text for each link is hidden under the header. Any suggestion? Thankyou very much and nice to meet you!

here is my page!

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<!-- Header -->
<header class="w3-display-container w3-content w3-wide w3-top w3-hide-medium w3-hide-small" style="position:sticky;max-width:1500px" id="home">
  <img class="w3-image" src="http://www.amtech.gr/el_images/page_header_a_1500.jpg" alt="Header_background" width="1500" height="400">
  <div class="w3-display-middle w3-center">
    <img src="http://www.amtech.gr/el_images/mavrofidopoulos_logo.png" alt="An. Mavrofidopoulos S.A." style="width:100%;max-width:800px;min-width:200px">

</div>
</header>

<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:200px;" id="mySidebar">
  <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#Link 2" class="w3-bar-item w3-button">Link 2</a>
  <a href="#Link 3" class="w3-bar-item w3-button">Link 3</a> 
  <a href="#Link 4" class="w3-bar-item w3-button">Link 4</a>
</div>

<div class="w3-main" style="margin-left:200px">
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
  <div class="w3-container">
    <h1>My Page</h1>
  </div>
</div>

<div class="w3-container">
<h3>Welcome!</h3>
<p>Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>
   
   
  <!-- Link 2 -->
  <div class="w3-container" id="Link 2">
    <h1 class="w3-xxxlarge w3-text-red"><b>Link 2</b></h1>
    <p>Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>  
   
</div>

<script>
function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}
</script>
     
</body>
</html>

Thank you very much for your response! I mean that I want the sidebar and the header stay fixed in their position and only the content scrolls up and down behind the header. It works somehow now but the problem is that when I click on the links in sidebar it doesn't scrolls to the correct point of the text because the correct point is hidden behind the image. I haven't insert enough text in the site but if you shorten the height of the screen I hope you'll understand what I mean. I'll upload a more comprehensive example of my site soon and I'll ask again. In any case Thank You very much again! — Thanasis, Jun 22 '18 at 18:16

Responsive image over a responsive sidebar

0 Answers0