Docs

[Frocreate]

Hey all, I’ve created a landing page where there was no original intent to create any additional interior pages. Now the client is asking for additional pages.

After reading through the forum, I figured out how to make the header on the home page transparent at first but then change to contain a background image/pattern on scroll. Now that we are adding additional pages, I only want this style to appear on the home page and not on the interior pages. On those pages, I’d like the navbar to have a solid background from the start, still with a fixed top.

Link to follow. Thanks!

[Frocreate]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! You can utilize the .home selector to apply your CSS specifically on home page.

e.g

body.home .x-navbar.x-navbar-fixed-top {
  background-image: URL('IMAGE URL');
}

Hope it helps, Cheers!

[Frocreate]

Thanks, that’s a start but doesnt really help do what I need.

Maybe I didn’t explain it well enough. On the home page only, I’d like the navbar to start transparent and then change to the wood background pattern when a user scrolls.

On all other pages, I’d like the navbar background to maintain the solid wood pattern. No transparency before scroll.

Thanks again!

[Jade]

HI there,

I tried accessing your site but it seems to be inaccessible at the moment.

[Frocreate]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

.x-navbar {
background-color: transparent !important;
}

To :

.home .x-navbar {
background-color: transparent !important;
}
body:not(.home) .x-navbar {
    background-image: URL('http://vacationwithsasser.com/wp-content/uploads/2017/01/pattern_retina_wood-blue.jpg');
}

Hope it helps.

[Frocreate]

YES! That did the trick. Thank you!

[Rahul]

You’re most welcome!

Let us know if we can help with anything else.

[Author]

Posts