Action button: not enough scroll using static menu & front page theme

Hi athemes team. Really enjoying your work on Sydney theme but I have hit into a problem that I need your help with.

I have set up a static front page using the “Front Page” page template and I am using a static menu style. When I hit the call to action button the page scrolls down as expected, but it always leaves 100 px (approx) strip of the slider image at the top of the screen. This is not so noticeable with a sticky menu but that’s not what I want.

What I have discovered is if I change the page template to “Full Screen” this problem doesn’t happen; but what I get instead is the page title showing in that same 100 px strip which doesn’t look so good. I don’t need the page title showing.

I have tried to adjust the standard 100px padding at the top of the Page Builder row but this isn’t having any impact on this issue. I have found that I can reduce the size of the strip to approx 50px by adjusting the page wrapper padding settings but these do not seem to have any consistent impact on the problem.

I am developing on a localhost so can’t share a url with you, but to make sure there is nothing else causing the issue I have made a fresh WP install with only Sydney, Page Builder and a few sample services and Services A widget set up to test it. There are no other plugins or extra CSS anywhere.

I would prefer to stay with the “Front Page” page template if possible becuase there are no page titles on show but would like to know how to get the screen to scroll without leaving this strip visible.

BTW the exact same thing happens when using custom links on menu items (e.g. #pg-5-5). The scroll doesn’t quite go far enough. This happens in IE, FF and Chrome.

Any help will be gratefully received.

Hello Matthew,

Please try to use the following CSS code as a workaround.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#your-anchor {
    margin-top: 70px;
}

Just replace #your-anchor in the code above with an anchor that you are using on your website.

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

Kind Regards, Roman.

Hi Roman,

Thanks for your response. I have played with your suggestion in a child theme and it sort of works.

The action button still doesn’t quite scroll far enough. What happens now is that the top strip is a solid 70px of white instead of the bottom of the slider image which it was before. This is definitely an improvement. Is it possible to change the color? I have tried using color: #e8e8e8; but it doesn’t like this at all - text goes wrong. And then I’ve tried background-color: #e8e8e8; but this doesn’t change anything.

If I can get the color right this seems a reasonable workaround. However, what I don’t understand though is if I type the URL localhost/athemes/#primary into the address bar, the page scrolls to the perfect position but when apply the same to the action button, it comes up 70px short. And while changing the values of the padding and top margin in your suggestion does make some difference, it doesn’t ever seem to get rid of the problem.

Thanks again for your help.

Hi,

We’re using a 70px offset to compensate for all or part of the sticky menu height. Otherwise the menu would cover the section instead of stopping before it. Unfortunately that’s not something that’s easy to disable at the moment.

Hi Vlad,

I understand your point and given all the other great things about Sydney, it’s a small inconvenience.

Is there anyway to change the color of the infill that Roman proposed?

Currently it is white and ideally I’d like to be able to match it with the various colors I am using the differentiate the separate parts of the front page.

Can you share a link or at least a screenshot?

Sure, here it is: -

https://snag.gy/XBynYg.jpg

Roman’s code is generating the white bar underneath the slider image and the start of #primary that is shaded grey.

What I’d like to be able to do is shade it the same color grey.

Assuming that’s your homepage, you could do this:


.home {
   background-color: #e8e8e8;
}

If you have any rows on that page without a bg color or image set, you’ll have to set them to white, otherwise they’ll turn #e8e8e8.

That works for me Vlad.

Thanks to both you and to Roman.

Please mark as resolved.