Docs

[dsmillie]

Hi there.

I have my rev slider (below masthead) set to full screen. It indeed remains full screen at all sizes when resizing the browser slowly (using the mouse to do so from the corner or side of the window). (I’ve added .masthead into the rev slider settings to keep it full screen.)

However, when you double click the top of the browser window, or click restore down in the top right, so it ‘instantly’ resizes, the rev slider falls short of the full screen. When you then manual resize, it restores to full screen.

I’m fairly sure this is a consequence of how I have set up my navbar to resize either when scrolling down on large screens or for mobile screens with a slow transition effect. I.e. when it instantly resizes, it doesn’t recognise the fact that the navbar will end up smaller than before it was resized. When you do this slowly, it has time to recognise this.

Is there anyway to force it to recognise the eventual size of the navbar when it resizes, even before this has fully transitioned?

Many thanks for your help.
Darren

[dsmillie]

This reply has been marked as private.

[Christian]

Hey Darren,

Please try adding .masthead to Increase/Decrease Fullscreen Height setting (see attachment)

Thanks.

[dsmillie]

Hi Christian,

Thanks for your reply. I had already done that as mentioned and the resizing is working properly when slowly resizing the window. When you do it rapidly, it doesn’t properly resize unless you refresh or unfocus/refocus.

I think it’s because my navbar/masthead height changes from 120px for larger devices to 83px for smaller devices through a slow transition effect so it resizes based on the original height of the navbar rather than the final height of the navbar (after the transition), if that makes sense.

Any ideas?

Thanks,
Darren

[Nabeel A]

Hey Darren,

Yes the slow transition is causing the problem, you can try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-navbar-inner, .x-navbar .x-brand, .x-navbar {
    -webkit-transition: none !important;
    transition: none !important;
}

Let us know how this goes!

[dsmillie]

Hi Nabeel

That’s great, thank you! It’s solved most of the problem. (Although I’m confused how it doesn’t cancel out the earlier CSS – and indeed it doesn’t – which enables the gradual menu transition when scrolling up and down.)

I’ve noticed there is still one issue when resizing although I suppose it’s quite specific and therefore less likely for users to do. If you start with a small window, scroll down, maximise and then scroll up to the top (in that order) the bottom of the rev slider is below the bottom of the window. If you had any equally simple solution to take care of that I’d be extremely grateful to hear it.

Darren

[Paul R]

Hi Darren,

To fix it, you can add this in Homepage > Cornerstone > Settings > Custom Javascript

https://www.screencast.com/t/gyXN7f5uSbS

jQuery(function($) {
    $(window).on("resize", function () {
        var windowHeight = $( window ).height();
        var navbarHeight = $('.x-navbar').outerHeight();
        var myHeight = windowHeight - navbarHeight;
        $('.home .x-slider-container .rev_slider_wrapper').css('height',myHeight+' !important');
}).resize();
});

Hope that helps.

[dsmillie]

Hi Paul,

Thanks for this but unfortunately it doesn’t seem to have had any affect (or at least not solved the issue above). I’ve also now noticed that Nabeel’s solution is impacting the transition effects I had built in for my navbar – instead of gradually shrinking when you scroll down it now instantly changes (although the logos and menu items still transition gradually).

Is a another solution to somehow create a “phantom” container to which we can assign a height when the screen is smaller (83px) and a different height when the screen is larger (120px) using something like media queries. You then can place this container into the settings for the rev slider under Increase/Decrease Fullscreen Height instead of using .masthead.

If there is such a way of doing that (i.e. creating a container that is not visible on the webpage) then I think it would solve the problem allowing me to retain the gradual resizing of the menu but ensuring the rev slider fills the screen correctly. Can you let me know how to do that if possible?

Thanks,
Darren

[Paul R]

Hi Darren,

While we are happy to help with the occasional quick tweak here or there, we are well into the custom development realm, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[dsmillie]

Thanks for your help so far. Let me ask another question then, hopefully in scope, which will probably help me get to my solution:

How do you adjust the height of a section you have created in Cornerstone such that it varies with screen size (e.g. different padding in different media queries)? I’ve seen others ask similar questions and receive answers although I’ve not been able to get those answers working for me.

In my case I’ve created x-section-10 but I can’t seem to change the padding with CSS.

[dsmillie]

I’ve successfully done the above now and I’m using #x-section-10 as the offset container for the rev slider. It’s working. But now I need to figure out how to hide this section on the page while retaining its properties for passing to the rev slider.

[dsmillie]

OK, final update – I’ve solved this! Just in case anyone has a similar problem in future, below is what I did. Just to recap, the problem was the rev slider didn’t fill the screen exactly when resizing the browser quickly because my navbar changes height through a slow transition when either scrolling down or moving to a smaller screen size. To solve this, I:

1. Created an empty section in Cornerstone (with 0 padding) – it doesn’t matter what it’s called or where you place it on the page

2. Added this CSS to Appearance > Customize > Custom > Edit Global CSS:

@media (min-width: 943px) {
#x-section-10 {
height: 120px !important;
}
}

@media (max-width: 943px) {
#x-section-10 {
height: 83px !important;
}
}

#x-section-10 {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

(You would obviously need to adjust the section name and heights and screen sizes to your specifications.)

The third bit of code positions this section off the screen which let’s you retain its properties (height in this case) but not have it visible.

3. Added the section name (in my case #x-section-10) to Increase/Decrease Fullscreen Height in the rev slider settings.

[Christian]

Glad you’ve sorted it out and thanks for sharing.

[Author]

Posts