Menu Background Customisation

• 

  earthbeatuk · Member · Feb 13, 2017 at 11:32 pm

  • Copy link
  • Add topic to favorites

  Hello good people,

  I’ve already read through ample threads on this issue to no resolve. I’m hoping there is an angel out there among the crowd that can sort this out.
  Basically wanting the background of the menu bar transparent on the front page with the title image showing , but as I scroll down, would like to have a black background. Also would love to center the menu elements.

  I.e Exactly like this site : http://www.earthbeatfestival.com

  Having some trouble here and many hours going in circles, feeling like im getting nowhere. I’m using the harmonic theme.

  Many thanks,

  \s

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

• 

  aakashpatelsite · Member · Feb 14, 2017 at 12:37 pm

  • Copy link

  Hi,
  I have visited your blog it seems to be ok as your requirements.
  It is transparent and when you scroll down the nav bar becomes black as you require.
  I think so you have solved your problem.

  Thanks,
  Aakash Patel

• 

  earthbeatuk · Member · Feb 14, 2017 at 1:02 pm

  • Copy link

  Hi Akash,

  Thanks for looking.. I think you may have seen the example site I linked.

  My blog is

  http://www.earthbeatfestival.wordpress.com

  Please have a look and let me know what you think..

• 

  thesacredpath · Member · Feb 15, 2017 at 3:10 am

  • Copy link

  Hi @earthbeatuk, the background area of the header where the navigation is overlays the body background color, so we can set the #masthead div to a transparent background color, but then the maroon body background color will show. You can see that by adding the following to your custom CSS.

  #masthead {
  	background-color: rgba(0, 0, 0, 0)
  }

• 

  earthbeatuk · Member · Feb 15, 2017 at 10:28 am

  • Copy link

  Thanks for the reply. Do you know how to make the transparency go away when scrolling down? using only CSS? let me know if this is a possibility.

  Thanks

• 

  thesacredpath · Member · Feb 15, 2017 at 5:57 pm

  • Copy link

  I don’t know of a way to do that with CSS only. On the themes that do that, it is typically done with Javascript or jQuery, and we cannot use those at WordPress.com.