Revolution Slider - full screen slider on page load

[Deesign]

Hi Team X,

I’ve been struggling with the exact settings to achieve a slider that displays on the whole screen on all screens and then a button slides down so that the top of the screen meets the top border of the navigation (under the slider). I have the revolution slider layout set to full screen and added the .masthead code and that seems to fill the screen with the slider, but then the button slides down, but not all the way to reach the top border of the navigation bar. If I remove that or put a negative setting in decrease module height this gets even worse.

Is there a trick to achieve this goal?

[christopher]

Hi @Deesign,

You set the Revolution Slider correctly. The problem is the destination of the Book Table button. You can use the built in feature of the X theme to add a go to button.

I went to the homepage in the WordPress Dashboard and enabled the scroll button:

Then I went to X > Theme Options > CSS and added the code below to mimic the same style of the button that you used in the Revolution Slider itself:

.x-slider-scroll-bottom.above {
    left: calc(50% + 30px);
    width: 220px;
    border-radius: 0;
    background: none;
    font-family: lato, serif;
    font-size: 15px;
    border-width: 2px;
    transform: translateX(-50%);
    bottom: 71px;
}

.x-slider-scroll-bottom.above i {
    display: none;
}

.x-slider-scroll-bottom.above:before {
    content: "BOOK A TABLE";
}

Now if you hide the button layer on your Revolution Slider you will have a button that works correctly and scrolls to the end.

Thank you.

[Deesign]

Thank you @christopher - appreciate the guidance but also that you helped take the first steps in the solution. I did review all the updates you mentioned above and I could not get the Revolution Slider button to be hidden on the front end, it was hidden in the builder and on the preview but kept displaying on the front end. In the end I unchecked the Enable Scroll Bottom Anchor on the Wordpress page settings (amazing that this adds a button).

I appreciate the attention to detail on reformatting Bottom Anchor Slider button but it does not have the hover effect of the original button I was working with inside of Revolution Slider, which I would prefer to keep. Is there any other work around that would keep the original button in Revolution Slider and still achieve the alignment goal?

[ruenel]

Hello @Deesign,

The Bottom Anchor Slider button needs custom CSS coding to be able to make it look similar to what you have in the slider. You may reposition your slider button instead. You can place it at the bottom center of the scene so that it will have the same position as the Bottom Anchor Slider button.

You will have to edit the slider and click the button layer. You should find the “Size and Position” option in the layer options.

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

[Deesign]

Thank you @ruenel,

I understand that I can attempt to add additional custom css to the new Bottom Anchor Slider button that @christopher showed us how to create to replace the original button that we created in revolution slider.

The goal was to have the slider button reach an anchor position that had the top navigation bar border align directly at the top of the screen after pressing it. Is there a solution to achieve this without working on more css for the new button. The current button is designed perfectly in Revolution slider we only need to adjust the end result of selecting this button, which at the moment, leaves us with a top navigation bar not quite at the top of the screens. A fine detail, but these are the alignments that make X and Pro sites stand out.

Is it possible to achieve this with the existing Revolution Slider button?
The space seems to be the exact pixel height of the Navigation Bar… is there a correlation between the two?

I’ve run into another issue with anchors on the same page, maybe you can assist as well:
The Journey is anchored to the corresponding section below and is functioning correctly on desktop mode, but I did have to create this section for mobile as well (hide original section for desktop and display special section for mobile devices) on the mobile section the ID is set correctly (the same as the desktop version) but the navigation button doesn’t slide to that section when selected? I’ve troubleshooted this all day and cannot seem to find the obvious reason it would not be functioning correctly.

[christopher]

Hi @Deesign,

I went to your website and selected the button in question inside the Revolution Slider and clicked the Actions and selected the last action that you added to the button and added an offset of 100 pixels and it is now showing ok.

But it might have a different offset for tablet or mobile as the height of the header might change. You either need to keep the height of the header the same for the desktop and mobile mode, or add another layer inside your slider that shows only on mobile view and set another pixel value for the offset.

You either need to use this method or the previous method I suggested and unfortunately there is no way to account for that gap that you see on the scroll.

Thank you.

[Deesign]

Ahhhhh… Scroll Offset!
Thank you @Christopher - perfect solution!

Do you have any idea why the mobile only section for The Journey anchor would not be working?

I’ve run into another issue with anchors on the same page, maybe you can assist as well:
The Journey is anchored to the corresponding section below and is functioning correctly on desktop mode, but I did have to create this section for mobile as well (hide original section for desktop and display special section for mobile devices) on the mobile section the ID is set correctly (the same as the desktop version) but the navigation button doesn’t slide to that section when selected? I’ve troubleshooted this all day and cannot seem to find the obvious reason it would not be functioning correctly.

Full Gratitude!

Dee

[rad]

Hi @Deesign,

An ID is unique and should be added once. I recommend adding all your content on single section with a single ID where the anchor links. Then just simply add multiple rows the represent each device, that way, it still uses the same ID for all rows regardless of device.

Thanks!

[Deesign]

Thank you @rad - I started to follow these steps to find this solution after a few issues with the section background image I realized I could add the same image to the row and viola - perfection!

Thank you

[ruenel]

You’re welcome @Deesign!
We’re glad we were able to help you out.