Landing Page with Crelly Slider - Appearance

Hi,

I have set up a new landing page and used Crelly Slider to get a nice first view. I would like to have the top menu and the slider appear the same way like on the main page. Figured out, that there is an additional header. So, i added this css code to get the slider picture at the background of the menu bar:

.header-clone {
    height: 0px !important;
}

But now I am stuck. The slider is moving to the top the way i like, but now the 84px are missing in the size of the slider. The bottom of the slider also moves up and it looks kind of small now. And the most problematic thing is that every single site looks weird now because the 84px are added on top of the menu bar.

And I did not make it to get the menue bar transparent and only colored if I scroll.
I played with

.site-header, .site-header.header-scrolled {
    background-color: rgba(32,37,41,0.9);
}

and set rgba to (32,37,41,0.1). But that changes the menu bar completely.

One more thing: On that landing page I would only like to have “Home” and “Contact” in the menu bar. Any idea to get that done easily and fast? I mean, i would like to have everything in menu bar but that does not work because I am using #section to smooth scroll on homepage. Have no clue to get that #section jump back to homepage.

I would appreciate your help. I already am a Pro Customer but this instance of Astrid is at the moment non-Pro cause I do not want to crash the site if i upgrade to pro.

Homepage
New Landing Page

Hello TomDoe,

Please create a separate topic for each of your issues in order to make it easier to help you.

Kind Regards, Roman.

Sure.

This Topic is about:
I have set up a new landing page and used Crelly Slider to get a nice first view. I would like to have the top menu and the slider appear the same way like on the main page. Figured out, that there is an additional header. So, i added this css code to get the slider picture at the background of the menu bar:

.header-clone {
    height: 0px !important;
}

But now I am stuck. The slider is moving to the top the way i like, but now the 84px are missing in the size of the slider. The bottom of the slider also moves up and it looks kind of small now. And the most problematic thing is that every single site looks weird now because the 84px are added on top of the menu bar.

How do I extend the Slider of this single page to the background of the menu bar? And at the same time do not change the appearance of any other single page?

Thank you

Hello TomDoe,

Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

body.page-id-1070 #masthead:not(.header-scrolled) {
    background-color: transparent;
}

body.page-id-1070 .header-clone {
    display: none;
}

Kind Regards, Roman.

Hi Roman,
awesome as always. Thank you very much.

You are welcome TomDoe! :slight_smile:

Kind Regards, Roman.