Have Video Background Cover Menu/Main Header Section

Support
#1

Hi,

I have a full-section video background on my homepage using the Cornerstone elements (my website: , but I would like the video background to also spread and cover the top header/menu section as well, making the first page portion seamless with video: http://misterlevius.com/

**These homepage sites are perfect examples:
http://explore.tnexperiences.com/
https://thehoxton.com/

Can this be done? Thank you.

#2

Hi,

To achieve that, you can add the code below in Theme Options > CSS

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

.home .masthead {
    position: absolute;
    width: 100%;
}
}

Hope this helps

#3

Thank so much, this worked.

Now when I scroll down the page, the fixed navigation/header menu is also transparent and clashes with the pics and text. How can I get the nav bar to have a white background and change of text color after someone starts scrolling down the page?

This is an example of what I’d like:
https://thehoxton.com/

Thank you

#4

Hi again,

Please replace the previous code with this:

@media screen and (min-width: 980px) {
  .home .x-topbar,
  .home .x-navbar  {
     background-color:transparent !important;
     transition: all 0.6s ease;
  }
  .home .masthead {
      position: absolute;
      width: 100%;
  }
  .home .x-navbar.x-navbar-fixed-top {
    background: #fff !important;
  }
}

Let us know how this goes!

1 Like
#5

It’s perfect, thank you!

#6

Glad we could help.

Cheers!

#7

Ah, actually (this might be complex):

  1. Is it possible to change both the nav bar color and my custom logo color (usually white) when static/no scrolling’s happened to a different color (say, black) once scrolling starts and the navbar background appears?

  2. How can I get the navbar to ‘blend’ back in with the header video background if people scroll back up to the top?

This website nav bar/font color change is what I’m looking for:
https://thehoxton.com/

Thanks!

#8

Hey There,

To resolve your issue, please update the css code from this:

@media screen and (min-width: 980px) {
  .home .x-topbar,
  .home .x-navbar  {
     background-color:transparent !important;
     transition: all 0.6s ease;
  }
  .home .masthead {
      position: absolute;
      width: 100%;
  }
  .home .x-navbar.x-navbar-fixed-top {
    background: #fff !important;
  }
}

Replace it with this:

@media screen and (min-width: 980px) {
  .home .x-topbar,
  .home .x-navbar  {
     background-color:transparent;
     transition: all 0.6s ease;
  }
  .home .masthead {
      position: absolute;
      width: 100%;
  }
  .home .x-navbar.x-navbar-fixed-top {
    background: #fff;
  }
}

And then, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

jQuery(function($) {
	$(window).scroll(function() {
		if ($(window).scrollTop() > 400) {
			$('.x-navbar').addClass("x-navbar-solid").css("background-color", "rgba(255,255,255,0.95)");
      		$('.x-brand img').attr('src','//misterlevius.com/wp-content/uploads/2018/01/MISTER-LEVIUS-2-black-1.png');
      		$('.mobile').css("background-color", "transparent");
		} else {
			$('.x-navbar').removeClass("x-navbar-solid").css("background-color", "rgba(0,0,0,0.15)");
      		$('.x-brand img').attr('src','//misterlevius.com/wp-content/uploads/2018/01/MISTER-LEVIUS-2-black-2.png');
      		$('.mobile').css("background-color", "rgba(0,0,0,0.95)");
		}
	});
});

This JS code will swap out the two logo images black-1.png and black-2.png.

Hope this helps. Please let us know how it goes.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.