Docs

[afpereir]

Hello,

In reference to my site http://www.senseflux.com/

How can I have a top image with paralax with transparent header, like in the example below?

Home

Thank you.

[Darshana]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, we’ll be happy to provide you with a response once we have a better understanding of the situation.

In the meantime, please check the following walk-through (https://www.youtube.com/watch?v=FNiWeePOVsk).

Also to enable header transparent option, head over to Appearance -> Customize -> Header -> Navbar Position and set it as Fixed Top.

Let us know if that helps.
Thanks!

[afpereir]

I need to have a full-width image at the top/beginning of the website, as background that I can overlay text on top, like in the example below :

Home

Thank you.

[Christopher]

Hi there,

Please add slider below masthead, see this link : https://community.theme.co/kb/sliders/
Then we’ll help you to make navbar transparent.

Hope it helps.

[afpereir]

Hi Christopher, we’re almost there…now I need to have the header menu at the top and hover over the image, not below it, like in the example below :

Home

Thank you.

[Joao]

Hi There,

Is your site http://www.senseflux.com/ ?

If yes first think you need change your page template.

Once in your homepage

Please go Edit Page

Than Find On the right side below the blue Update Button:

Atrributes > Page Templates and choose Blank No Container Header Footer

After that enter the following code to Appereance Customizer Custom CSS

.x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color:white;
}

And the following code to Appereance Customizer Custom Javascript:

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Hope that helps

Joao

[afpereir]

Hi Joao,

now I only need to add a fullwidth image on the background, behind the header menu with parallax effect, like in the example below :

Home

Thanks.

[Joao]

Hi There,

Please go Edit Page

Than Find On the right side below the blue Update Button.

Below it you will find Atrributes > Page Templates and choose Blank No Container Header Footer

Also on Cornerstone make sure your Column Container is deactivated on the first section, in order that your Image can go to the edges.

If you need further help please provide us your Admin Credentials in order that we can take a look.

Thanks

Joao

[afpereir]

Joao,

how can I send you Admin Credentials on a private message?

[Christopher]

This reply has been marked as private.

[afpereir]

This reply has been marked as private.

[Rahul]

You’re welcome!

[afpereir]

Joao,

Has anything been done yet? I don’t seen any changes on the homepage.

Let me know if there’s anything I can do.

[Christopher]

Hi there,

Please use cornerstone, add background image to first section and enable parallax.

Please add following code in Customize -> Custom -> CSS :

@media (min-width:979px){
.home #x-section-1 {
margin-top:-90px !important
}
}

Hope it helps.

[Author]

Posts