Header slider CTA button scrolls to far down

Hi There!

The CTA button in the header slider scrolls too far down on desktop (the menu covers up some of the content). This is only on desktop, on phone it’s almost perfect.

Here’s a link to the site I’m working on you that you can see.

I tried following this topic to lessen the sliding, but it did not work for me.

Do you have any advice to stop the CTA from scrolling down so far?

Thanks,

Travis

Hello Travis,

  1. Please use #content ID instead of #welcome for that button.

  2. Also please try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

@media (min-width: 1025px) {
    body.home #content {
        padding-top: 110px;
        margin-top: -110px !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

That worked great! Thanks!

For my own curiosity, how does changing the id from #welcome to #content affect it so much?

I had to change the padding and margin to 40 and -40, but it works perfectly on my computer screen. When I use the tablet and phone viewer, it doesn’t scroll enough now. Is there any way to change the CSS so that all three (computer, tablet, phone) scroll to the correct part of the screen?

Thanks,

Travis

Hi again,

I haven’t received a reply yet. I was hoping you could point me towards a CSS code that will help phones, laptops, and tablets scroll to the correct part of the screen.

Thanks again!

Travis

Hello Travis, sorry for delay, I had a little road trip.

It looks like you have this additional CSS code (line 43-45):

.page-wrap {
    margin-top: -80px !important;
}

…please try to replace it with this:

@media (max-width: 1024px) {
    body.home #content {
        padding-top: 0;
        margin-top: 70px !important;
    }
}

Kind Regards, Roman.

Hey Roman,

That worked perfectly! Thanks!

Hope you enjoyed the road trip!

Travis

Great, you are welcome Travis! And thanks :slight_smile:

Kind Regards, Roman.