Docs

[Mitica]

Hello!

I am working on test.tierramitica.com and would like to have a loop video of a waterfall behind my navbar (logo and menu).
Now I have read a lot on this photo and come across a lot of videos not showing up in different browsers etc etc.
My idea is to create a high quality gif of the video, which is about 5 seconds of our waterfall running, but I have never done this before and so before I start and figure it out, I would like to know if this is an idea that will work or if there is something better. With revolution slider I do not see how I could have my logo and menu on top of the slider. Plus I am thinking that this might add to the weight of my site. Basically I have no idea where to start and could use some advice.

Thank you!

[Lely]

Hello Mitica,

Thanks for posting in. Yes, we can use Revolution slider. Just create one transparent slide. Then add the slider on a page using Slider Settings : Above Masthead. Add the video URL on Optional Background Video text field. Then set your menu as fixed top on the customizer and then we can use some custom CSS to make the navbar transparent so we can see the video behind.

Hope this helps.

[Mitica]

Hello Lely! It worked, hurray!!! See test.tierramitica.com! Thank you! Ok so now I need a custom css to make the navbar move upwards so that it goes on top of the video and I would also need my carousel to go above everything and be fixed on the top of the site.. Can you help me with this too?
Thank you so much, I tried for hours yesterday and did not get anywhere 🙂

[Nabeel A]

Hi there,

1. You can activate the slider below masthead instead of above masthead.

2. Making carousel fixed on top could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[Mitica]

Hello Nabeel and Lely,

With putting the slider below the masthead, my carousel goes on top and everything is where it should be, except for my nav bar, which should come lower, to go on top of the slider, both my main menu items and my logo. Is this in any way possible, please? link: test.tierramitica.com

Thank you, please help me out, I really want to make this work..

If this is not possible, please advise me on any way to get my navbar (logo and menu) to have a video playing in its background

[Rad]

Hi there,

Should the header include the carousel? It can easily be implemented by adding this CSS to Admin > Appearance > Customizer > Custom > CSS

.home .masthead {
height:0px;
}

But since your post carousel is within the header, it will not work. Please put it back on the header (revert it like the original) then apply that CSS.

Thanks!

[Mitica]

Hello Rad,

This does not work, see test.tierramitica.com, and I think I am not managing to explain what I want to achieve.
I would like my page to have the following composition:
1. Carousel on top
2. Underneath the carousel: my logo and main menu
3. Background of logo and main menu: the waterfall loop video I made with revolution slider.

Basically I want the background of my logo and menu bar to have a video of the waterfall, in whichever way I can achieve this, this was my original question and then Lely proposed to make the video with the slider and she said that we could put in some custom coding to have the navbar with logo and main menu to come on top. Is this possible? Or should I do this differently?

Thank you for the help, people!

[Christopher]

Hi there,

Please remove this code :

.home .masthead {
     height: 0px; 
}

And add this one :

@media (min-width:979px){
.home .x-slider-container.below.bg-video {
    margin-top: -269px;
}
}

Hope it helps.

[Mitica]

Hello Christopher! That actually did it, thank you so much!!! I fumbled a bit with spacing and stuff and now everything looks absolutely perfect! There is one more thing though, everything looks spectacularly good full screen, but when I change the size of the screen, everything jumps.. Is there any way to not make that happen?
See test.tierramitica.com.

Thanks so much, it is early sunday morning here and you already made my day 🙂

[Rue Nel]

Hello There,

Thanks for updating in! Due to X responsiveness, as soon as you resize your browser screen, there will be a slightly change of the layout like for example the navbar. The main menu will disappear and the mobile menu will display. This is normal when resizing the browser screen. You will not see this if you are viewing in an iPad or a mobile phone.

Hope this explains it.

[Mitica]

Hello Rue Nel, I realize that, but the problem is that it jumps to a place where it does not look good anymore, before the mobile menu pops up. see test.tierramitica.com. Is there I can do about that? Have the menu not be responsive, or less responsive?

Thank you!

[Rue Nel]

Hello There,

To avoid the jump, we will trigger the menu when the screen width is at least 1200px. Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 1200px){
    .x-nav-wrap.desktop {
        display: none;
    }

    .masthead-stacked .x-btn-navbar {
        display: inline-block;
    }

    .masthead-stacked .x-navbar {
        text-align: center;
    }

    .x-nav-wrap.mobile {
        display: block;
    }

    .x-nav-wrap.mobile.collapse.in {
        display: block;
    }
}

Hope this helps. Kindly let us know.

[Mitica]

Hello Rue Nel, Thank you for the code, it looks better now, except on large size, see attachment. Could you please alter the code in a way that the large size looks good also? Thank you so much, I think this is the last of all the big adjustments and I can go and just fill in pages from here on 🙂 You guys rock 🙂

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-nav-wrap.mobile').css('height', 0);
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Mitica]

Hello Nabeel and thank you, this makes the open menu disappear! However, there is still one thing I would like to have solved: When looking in customizer at the medium screen, the video appears under the navbar, see print screen. Is there any way to fix this too?

[Author]

Posts