[NueraParticipant]

I’ve tried just about every solution on the forum to get my header from transparent to opaque on scroll. I suspect I likely have a code conflict, but I’m not sure where it would be. Could you help me achieve two things?

1) I’d like the navbar to be transparent at the top of the page, and then transition to #540756 on scroll.

2) It would be amazing if the navbar height shrunk from 90px to 60px, scaling everything inside accordingly. I’ve achieved this on a number of sites already, but I have no idea how that solution would affect the first part of my request.

Following up with site creds. Thank you so much!!

[NueraParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in and the very detailed information. I have check your page and I found out that you have inserted custom css in a wrong place. Please edit your page and remove the custom css from the custom JS. Please check out this screenshot: http://prntscr.com/elqqjq

#1] To have a transparent navbar, please check this thread: https://community.theme.co/forums/topic/navbar-transparent-until-scroll/#post-669543

#2] To change the navbar, please check this thread: https://community.theme.co/forums/topic/shrink-menu-logo-and-nav-bar-on-scroll-back-to-full-size-at-top-again/

Hope this helps.

[NueraParticipant]

Hi Rue Nel,

Thanks for your help! I successfully achieved #2 from the list, and this works much cleaner than my previous solution.

I’m still struggling with #1 though. We had been playing with a lot of different JV options when you checked the page, but all of that has been removed now and I’m still unable to affect the transparency of the navbar.

Would you mind checking on #1 again for me? I followed the instructions but it didn’t seem to affect my navbar at all.

[Paul RModerator]

Hi,

You can try adding this under Custom > Edit Global CSS in the Customizer.

.home .x-navbar {
    background:transparent !important;
}
.home .masthead {
   position:absolute;
   width:100%;
   top:0;
}
.home .x-navbar.x-navbar-fixed-top {
   background-color:#540756 !important;
}

Hope that helps.

[NueraParticipant]

That’s terrific! Thank you so much Paul!!

[RahulModerator]

Glad we were able to help you out.

Feel free to ask us if you have anything further to ask regarding the X-theme.

Thank you. 🙂

[Author]

Posts