[Edward HParticipant]

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?

[Edward HParticipant]

This reply has been marked as private.

[RadModerator]

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!

[Edward HParticipant]

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

[ChristopherModerator]

Hi there,

Please try this :

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

Hope it helps.

[Edward HParticipant]

Hi, No that hasn’t worked either…

[Rue NelModerator]

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.

[Edward HParticipant]

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..!

[ChristopherModerator]

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.

[Edward HParticipant]

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?

[ChristopherModerator]

Hi there,

By adding provided code image should appear behind menu.
Please check : http://prntscr.com/6mdbh7

Please provide us with screen shot that shows how it should looks like.

Thanks.

[Edward HParticipant]

It appears that once I have scrolled down the page it becomes transparent but the menu is sticky and I dont want it to be, however I do need the menu on the home page to be transparent when we first arrive at the page not after we have scrolled down.

Once it goes past content bar 1 on the home page, then I want it to show the menu bar with the black background. Just like this website does it: https://www.pactcoffee.com/

I would like my site to perform just like this one does:
– When you arrive the menu bar is static and transparent
– When you scroll down the menu bar doesnt follow you, it stays at the top of the page.
– When you get past content band one, the menu bar shows up and follows you around the site.

Also, on any other page on the site the menu needs to be normal and not transparent. It is just on the home page content band 1 that it needs to be transparent.

Here is an image of it for you to view http://www.thehealthyhome.co.uk/2015/03/28/home-page-fault/ the current problem.

[RadModerator]

Hi Edward,

That setup is not possible with X theme. The navbar (fixed) follow user scroll as long as it’s touches the very top of the window. Just like this http://theme.co/x/demo/integrity/1/

Another problem is you don’t have slider similar to what you wish to copy. And your first content band is on very top. Thus, eventually, the navbar will start to float since it’s already on first content band.

How about setting up your slider first? Then add this javascript at your customizer’s custom javascript.

jQuery( function($){

$(window).scroll( function(){

if( $(window).scrollTop() >= $('.x-slider-container').height() ) {
$('.x-navbar-fixed-top').css({position: 'fixed !important'});
} else {
$('.x-navbar-fixed-top').css({position: 'static !important'});
}

} );

} );

Thanks.

[BroCodesParticipant]

Hi there i have a problem with what you have provided above:

WHAT I AM TRYING TO DO:
– Put the background behind the menu bar (DONE & Works perfectly “thanks”)

ERROR:
– Currently there is a white line at the bottom of the menu, how do you remove this?
e.g.: http://prntscr.com/6mdbh7

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
    border-bottom-width: 0;
}

Hope it helps, Cheers!

[Author]

Posts