[FIXED] How to change background color to transparent?

Issue

I have this website in prestashop

And I want to change the background of the header to transparent.

The slider should appear in the background of the header like in this website https://demotheme.site/prestashop/at_nova_demo/en/home-7.html. I am trying to do that in inspect mode but I am not able to do it.

Solution

There are two css properties you need to change to make the header transparent:

when the page is not scrolled down:

#header.navbar-fixed-top {
   background: transparent;
}

when you scroll the page, also need to change this :

#header.navbar-fixed-top.mini-navbar {
   background: rgba(255,255,255,0); /* <----here set the opacity to 0 */
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  -o-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  -ms-box-shadow: 0 5px 10px rgba(0,0,0,.1);
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

check here

to make slider appear in the background of the header, you need to remove the margin-top from iviewSlider element:

.page-index .iviewSlider {
    margin-top: 0; /* here set margin-top to 0, if not working, try to set as margin-top: 0 !important */
}

then your website will look like this

Answered By - Qiu Zhou

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)