webdeveloper123 Posted August 17, 2023 Share Posted August 17, 2023 Hi Guys, I am designing a website where I want to header to always be at the top, even when scrolling. So I tried the obvious things like: position: fixed; and position: sticky; and I got the code running, that part is ok, but it does not do what I expected. Best way to describe what I want is to have a look. If you go to https://www.theritzlondon.com/ and notice on their home page that the header always remains there, even if you scroll right down to the end. That's what I want, but the above didn't do it. Here are 4 screen shots to visually describe how my site reacts to position: fixed; The first screen shot shows when the page first loads and the following are taken as you scroll down the page I even tried out this tutorial but to no avail : https://www.w3schools.com/howto/howto_js_sticky_header.asp Here is my HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hotel London</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&display=swap" rel="stylesheet"> </head> <body> <header> </header> <div class="hero-image"> <div class="hero-text"> <h1>London's finest new luxury Hotel</h1> <p>Over looking Hyde Park</p> </div> </div> <div class="grid-container"> <div> <h2>WELCOME TO THE LONDON HOTEL </h2> <p>We are London’s most iconic hotel. A five star haven in Knightsbridge that is famous the world over for its historic elegance, impeccable service, impressive suites, and legendary Afternoon Tea</p> </div> <div> <img src="images/website_images/lobby.jpg"></div> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> <?php ?> </body> </html> and the CSS: * { box-sizing: border-box; } body, html { height: 100%; } /* The hero image */ .hero-image { /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/website_images/exterior-the.webp"); /* Set a specific height */ height: 50%; /* Position and center the image to scale nicely on all screens */ background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; margin-top: 90px; z-index: -1; } /* Place text in the middle of the image */ .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-family: 'Cormorant Garamond', serif; } header { padding: 40px; margin-bottom: 5px; background-image: url("../images/website_images/logo2edit.webp"); background-size: 100px 91px; background-repeat: no-repeat; background-position: center bottom; position: fixed; top: 9px; width: 100%; } .grid-container { display: grid; grid-template-columns: 40% 40%; padding: 10px; gap: 0px; background-color: white; margin-top: 15px; margin-left: 350px; margin-right: 100px; } .grid-container > div { font-size: 20px; } body > div.grid-container > div:nth-child(1) { font-family: 'Cormorant Garamond', serif; background-color: #E8E8E8; padding: 50px; height: 450px; text-align: center; } Thanks guys Quote Link to comment Share on other sites More sharing options...
Solution requinix Posted August 17, 2023 Solution Share Posted August 17, 2023 Seems to be working correctly. You do realize that you have nothing in that header except for a tiny image applied as the background, right? Quote Link to comment Share on other sites More sharing options...
webdeveloper123 Posted August 18, 2023 Author Share Posted August 18, 2023 hmmm your right, it just looked off because the header was virtually empty Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.