I am new to CSS and I am trying to create a website with a fixed header and parallax scrolling. However, when I add the fixed header the parallax scrolling over takes the fixed header.
Example with Parallax Scrolling:
http://www.magnoliaroomquilts.com/index0.php
Example with Fixed Header and Parallax Scrolling:
http://www.magnoliaroomquilts.com
I’m not getting anywhere on my own, can anyone get me pointed in the right direction?
Thanks in advance for your time…
Add a z-index to your sticky class
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Thank you!!! That worked great.
It’s good practice to validate your HTML and CSS frequently during the development of a web page. Doing so mitigates migraines.
https://jigsaw.w3.org/css-validator/
Your site:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.magnoliaroomquilts.com%2Findex0.php
The above test, for example, tells you that there is no such tag as
</br>. It should be written <br>.
Classroom experience will teach you that one should not use break tags to add space between paragraphs or other elements. That’s what margins are for.
Avoid inline styles such as:
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
The CSS should be separate from the HTML - either in the head of the page or preferably on a separate CSS stylesheet following those in the <head> section.
Empty tags, such as <link...>, <meta...>, <img...>, et al., do not require trailing slashes, such as…
<link rel="stylesheet" type="text/css" href="css/mrq-footer.css"/>
Finally, taking a formal course in HTML and CSS will pay big dividends as your web growth continues. The basic knowledge will offer you a foundation of knowledge which will help your understanding of HTML and CSS interactions and behaviours. The practice will help you form good coding practices.
You’re off to a good start!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.