Remove blank space under RevSlider

Support
#1

Hi,

I’ve a full-width RevSlider above masthead on my site that have a blank space on the bottom the same height of my fixed navbar.

I tried to fix the problem by using the “top: 75px” (navbar height) but then, when I click on the “scroll down” slider button, the page doesn’t align with the end of the navbar but with the start, looking ugly and sorta “cut”: it scroll too much so the black div results too high.

I need to remove that blank space so the black div can be put right below the slider and when I click on the “scroll down” the page doesn’t look like is cut.

On mobile, instead, even with no fix at all, anchors are not aligned at the bottom edge of the navbar…

As you can see, if I click on the “PROFILO” anchor, the black div should be covered by navbar.

On desktop is too high, on mobile too low.

Can you help me, please?

#2

Hi there,

If you are using the Pro theme, the above/below masthead option only works for default headers of the website and not the ones created by the header builder.

If you want to have the Revolution Slider in at the top of the header using the Header Builder I suggest that you add a separate Bar and Container at the top of the header. And use the Text element and add the shortcode of the created Revolution Slider there.

If you still have problems you need to get back to us with the URL of your website to see the case live. Currently, it is under construction.

Thank you.

#3

Hi,

I’m using the Pro theme but the header is the default one of Icon stack. I customized it through the “Appearence / Customize” option in the sidebar.

Anyway, this fix seems to work 'cause the white space is no longer visible but still remains the problem of anchor alignment after click.

If I click on the “scroll after slider” anchor, the page position is wrong, still “cut” by navbar: this problem occurs both on desktop and mobile.

Only on mobile, instead, occurs the “navbar anchor misalignment” issue. If i clik on “PROFILO” I can still see part of the previous div above.



I really don’t know how can I fix these problems so I’m providing you an user so you can track and fix the issues, if you don’t mind.

Thanks in advance :slight_smile:

#4

The position is wrong because you’re using the native Slider Revolution scroll down button instead of the one provided by X if you setup the Slider Below Masthead feature. There is no option for you setup but to increase the top padding of the row or content band containing your “Ciao” headline.

For the Profilo issue, you have this custom CSS

.vc_section.vc_section-has-fill {
    padding-top: 50px;
}

under this media query @media (max-width: 979px) and (min-width: 320px)

You need to decrease it.

Since this involves custom code, fixes and enhancements would be getting into custom development which is outside the scope of our support.

Thank you for understanding.

#5

Hi,

I’ve always used the default button for the slider but since I changed the way the slider was set, as suggested by @christopher.amirian, I had to put a button within the slider just to test the fix. Now, setting the slider in a div with VC is ok because no blank space is shown, but still the anchor doesn’t work properly, 'cause the scroll stops at CIAO heading and not at the beginning of the black div itself.

Anyways, I’ll try as you suggested to change the padding and decrease it, but I think that this can’t fix my problem with the anchors, honestly… I tried many times to change the padding of the interested div and nothing changed.

My humble opinion is that the problem is how the sticky header is managed.

I’m gonna let you know if the fix works.

Thanks :slight_smile:

#6

Ok,

I reset the “slider below mastheade” options just to fix that blank space and, checking again my css, I noticed there was a “top: -75px” on the slider div that caused the problem. Sure, there was some misalignment problems with the “scroll down” anchor but I fixed those too.

Now, to the problem of mobile anchor misalignment after the click. Still the problem was present, despite I tried your fix on the media query… until I figured ou! :slight_smile:

This misalignment occurs on mobile ONLY if I’m logged into WP. Infact, I unset the “under construction mode” for a second, logged out from WP on mobile and try again and the anchors works perfectly! I think it’s just a matter of javascript… don’t know really. The website work properly, most important thing ever :smiley:

Thanks again for your support :wink:

#7

You’re welcome! :slight_smile: