[bradkerinParticipant]

Hi there,

I have made my navbar transparent, but now when I scroll down the page, the page content scrolls over the text in the menu. Is it possible for content to fade out/disappear when it hits the bottom of the navbar?

Thanks in advance for any help you can provide!

[bradkerinParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! Regretfully there is no option in X that the content fades out underneath the navbar. Since you have added a custom css in one of your homepage, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media(min-width: 980px){
  body.x-navbar-fixed-top-active .x-navbar-wrap {
    height:40px;
  }
  
  .site .masthead .x-navbar {
    background-color:transparent;
    transition:all .5s linear;
  }

  .site .masthead .x-navbar.x-navbar-solid {
    background-color:rgba(0,0,0,0.75);
  }
}

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

[bradkerinParticipant]

Hi there,

That didn’t do anything…any other ideas?

Thanks!

[LelyModerator]

Hi There,

The CSS is working. It adds background color with opacity on your navbar. See this:http://screencast-o-matic.com/watch/cbeIhO6aU2. It’s just add it a little late. Now we need to adjust the JS. Edit your homepage in Cornerstone then on Settings Tab > Custom JS adjust the current script. Look for 350 scroll value. Adjust it to 120. Then the content will be behind the background but still transparent on top. See this with just 120 scroll value: http://screencast-o-matic.com/watch/cbeIhx6aU3

Hope this helps.

[Author]

Posts