SKT Perfect Fitness – Front Page Center

[osteo]

I am having troubles with the following issues:

1 -The header isn’t transparent even when I click the “Transparent Header on Front Page button” in the Custom–>Header->Header section. How can I make my header transparent? Like the Perfect Fitness Theme. (http://sktperfectdemo.com/demos/fitness/)

1A – is it possible to have a header like the Perfect Food Theme (http://sktperfectdemo.com/demos/food/)

2- How do I make the “title” and the “slidebtn” on the nivo-caption section become centered and responsive on all devices?

3- How do I make the “productcoursetitle” become centered in the productcoursebox section and be responsive on all devices?

I have included images:
1 & 2 issue – https://imgur.com/a/PnISD
1 & 2 – https://imgur.com/a/BZou4

3 – issue – https://imgur.com/a/my6OW
3 – https://imgur.com/a/rfZU3

[osteo]

The website that I am trying to edit is:

https://alleviahealth.com.au/

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.productcoursetitle { padding-top:55px;}
.title { max-width:65% !important; margin:60px auto 0 !important; text-align: center !important;}
.slidebtn { margin:0 auto !important;}

Regards,
Chris

[osteo]

Thanks Chris,

The coding worked well.

How do I make the header transparent? The “Transparent Header on Frontpage” is on, but is not doing anything.

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.home .header { position: absolute !important; background-color: rgba(10,10,10, 0.5); z-index: 1000;}
.nivo-caption { top:45% !important;}

Regards,
Chris

[osteo]

Thanks Chris,

Transparent coding works well.

The mobile responsive version is stuffing up though (getting cut off)- it doesn’t look the same as the Perfect Fitness demo mobile view.

Mobile view:
My website – https://imgur.com/a/uDMJO
Perfect Fitness – https://imgur.com/a/E13YL

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (mx-width:479px) {
.home .header {position: relative !important; background-color: rgba(10,10,10, 1) !important;}
}

Regards,
Chris

[Author]

Posts