How to get slider behind transparent navbar on all other pages apart from Home page

[core365]

Hi, I’m working on a site and the Home page is spot on as I have it - the slider is showing behind the transparent navbar - but I’d like this to be on all other pages too. I’ve tried to add CSS with the page ID for the About Us page (just to test if it works before doing it for all the other page IDs) but it doesn’t work!

Would you mind taking a look and letting me know what I’m doing wrong please!

I’ll put the URL in a secure note as it’s still in progress.

Here’s the CSS I’m using:

.page-id-30 .x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}
.page-id-30 .x-navbar-fixed-top-active .x-navbar {
background-color: transparent;
border-bottom:none;
}
.page-id-30 .x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
background-color:#ffffff;
border-bottom: none;
}
.page-id-30 .x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}
.page-id-30 .x-navbar {
    background-color: transparent;
    border:0;
}
.page-id-30 .x-topbar-fixed-top,
.x-logobar-fixed-top {
     position:fixed;
     top:0;
     width:100%;
}

Thanks!

[ruenel]

Hello There,

Thanks for writing in!

To resolve your issue, please update your css code and use this instead:

.page.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}
.page.x-navbar-fixed-top-active .x-navbar {
	background-color: transparent;
	border-bottom:none;
}

.page.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
	background-color:#ffffff;
	border-bottom: none;
}

.page.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}

.page .x-navbar {
    background-color: transparent;
    border:0;
}

.page .x-topbar-fixed-top,
.x-logobar-fixed-top {
     position:fixed;
     top:0;
     width:100%;
}

We would loved to know if this has work for you. Thank you.

[core365]

Hi, thanks for that, it works great on the pages I want it to, however, it changes the position of the slider on the Home page and I didn’t want it to change that - it’s moved it further up so the text is sitting on the bottom of the nav bar! Am I able to do it so it doesn’t effect the Home page, but changes it on all other pages?

I’ve included screen grabs to show you.

Thanks!

[christopher]

Hi core365,

Please change the code to the one below to force it not to apply on homepage:

.page.x-navbar-fixed-top-active:not(.home) .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}
.page.x-navbar-fixed-top-active:not(.home) .x-navbar {
	background-color: transparent;
	border-bottom:none;
}

.page.x-navbar-fixed-top-active:not(.home) .x-navbar.x-navbar-fixed-top {
	background-color:#ffffff;
	border-bottom: none;
}

.page.x-navbar-fixed-top-active:not(.home) .x-navbar-wrap {
    height: 0;
}

.page:not(.home) .x-navbar {
    background-color: transparent;
    border:0;
}

.page:not(.home) .x-topbar-fixed-top,
body:not(.home) .x-logobar-fixed-top {
     position:fixed;
     top:0;
     width:100%;
}

The code above adds a special css3 syntax: :not(.home) it basically says make sure that there is no class in the body tag that says home. And on the website, only the homepage has such a class in the body tag.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

[core365]

Brilliant, just how I wanted it, thanks!

Thank you for the tutorial links too - I already use the Chrome developer tool, but for some reason it doesn’t always work out with the correct div tag for me!

Thanks!

[mldarshana]

Glad we were able to help