transparent menu

• 

  loveslegato · Member · Sep 14, 2017 at 10:27 pm

  • Copy link
  • Add topic to favorites

  Hi I am looking to get a transparent menu when scrolling down: something like this https://datadrivenathlete.com.

  If not possible, how can I change the background and text color to something other then black and white respectively?

  thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 14, 2017 at 11:38 pm

  • Copy link

  Hi there, if we take away the background color on the menu, when someone scrolls to the point that the menu goes over the white content area, the menu items will not be visible to your visitors. In addition, the menu items would conflict with some of the text on the site if it were fully transparent.

  What we can do is to set a partial transparency with the following. In the rgba color declaration, the first three digits designate the RGB color, and the last, 0.5, designates the opacity. The closer to 1, the more opaque and the closer to 0, the more transparent. See what you think with this.

  #masthead.scroll-header {
    background: rgba(0, 0, 0, 0.5)
  }

• 

  loveslegato · Member · Sep 14, 2017 at 11:55 pm

  • Copy link

  Hi:

  that actually worked fine.

  however, how can i get rid of the black background on menu when scrolling down to a different color all together while keeping the level of transparency that code affords?

• 

  loveslegato · Member · Sep 14, 2017 at 11:58 pm

  • Copy link

  After adding code and scrolling down the child pages for blog is not visible but is visible when on top bar

• 

  thesacredpath · Member · Sep 15, 2017 at 5:13 pm

  • Copy link

  The above code should not affect any child pages. Which child pages are you referring to? I’m not seeing any “blog” page listed in the top menu, and I’m not seeing that you have a blog page set at Customize > Static Front Page.