Search code examples
cssloader

Show the loader above all the elements

I want to make this loader to be shown on a white background above all the elements on the site. Curently it is shown with transparency along with the menu and the logo This is the website: https://lea.oranjuice.club/

This the css i've used for the loader

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://lea.oranjuice.club/wp-content/uploads/2018/04/LeaSite_IntroAnimation270.gif') 50% 50% no-repeat rgb(249,249,249);}

Thanks

Solution

  • You need to give your header some z-index too, which will show it under your loader. 

    .header-absolute header.main-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index: 20 }