Transparent Menu Bar on home page only – Themeco Community

Transparent Menu Bar on home page only

Edward H — Fri, 27 Mar 2015 16:11:01 +0000

Hi I would like to make my websites menu bar transparent on the home page so that the background video of the 1st row shows behind the menu and logo on the home page only.

On all other pages I would like to be able to make the menu background black please.

An example of this on another site is: https://www.pactcoffee.com

Can you help me please?

Reply To: Transparent Menu Bar on home page only

Edward H — Fri, 27 Mar 2015 16:13:45 +0000

This reply has been marked as private.

Reply To: Transparent Menu Bar on home page only

Rad — Fri, 27 Mar 2015 22:46:17 +0000

Hi Edward,

Thanks for writing in.

Add this css at your customizer’s custom css under Admin > Appearance

.x-logobar, .x-navbar {
  background-color: #000 !important;
}

@media (min-width: 980px) {
.home .x-logobar, .home .x-navbar {
  background-color: transparent !important;
}
.home .masthead {
  height:0;
}
}

Cheers!

Reply To: Transparent Menu Bar on home page only

Edward H — Sat, 28 Mar 2015 04:22:29 +0000

Hi, thanks for the response. This doesnt seem to have worked..can we try again please?

Reply To: Transparent Menu Bar on home page only

Christopher — Sat, 28 Mar 2015 05:36:32 +0000

Hi there,

Please try this :

.x-navbar.x-navbar-fixed-top {
  background-color: transparent;
}

Hope it helps.

Reply To: Transparent Menu Bar on home page only

Edward H — Sat, 28 Mar 2015 07:36:24 +0000

Hi, No that hasn’t worked either…

Reply To: Transparent Menu Bar on home page only

Rue Nel — Sat, 28 Mar 2015 07:43:30 +0000

Hello There,

The code we have given in our previous replies must have worked out for you. This is what we are seeing right now, http://prntscr.com/6mb7fh

Maybe it’s your browser’s cache. Please clean your browser’s cache and check again your site. It would also help in testing your site if you will use Chrome’s incognito mode or Private Browsing mode in Firefox.

Please let us know then.

Reply To: Transparent Menu Bar on home page only

Edward H — Sat, 28 Mar 2015 10:33:46 +0000

Pact Coffee is not my site if you look at the private message it has the details of my site. I referenced PactCoffee as an example of what I want my site to look like..!

Reply To: Transparent Menu Bar on home page only

Christopher — Sat, 28 Mar 2015 10:58:04 +0000

Hi there,

Upon checking your CSS, I noticed you forgot to close curly bracket

Please fix this :

.text-white .x-btn:hover {
  opacity: 0.75;
}

Instead of our previous suggestion add this :

.x-navbar{
  background-color: transparent;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: auto;
}

Now increase top padding of first content band to 175px.

Hope it helps.

Reply To: Transparent Menu Bar on home page only

Edward H — Sat, 28 Mar 2015 12:14:29 +0000

Hi, I think this has turned the menu transparent…I think. But my image for the background of content bar 1 is not showing behind it…can you help with this?