Start to scroll button

Hi there,

Thanks for the great theme - loving’ it.

Is it possible to have the call to action button in the Welcome area set up as “start to scroll” button, so when the user sees the beautiful full width image with a nice headline gets automatically scrolled down to the first content on the same “main” page when clicking i.e. “START”?

As far as I can see there is no option to insert section “#” tags for same page content which address I could insert into the field “The link for the call to action button”. I also could not find any help in this forum for the Moesia template.

Thank you so much for your assistance with this.

Cheers
Johnny

Hi,

Please post a link to your website, so if you use widgets I can check for the ID of the first widget on your site, so you can link the button to that.

Best Regards,
Csaba

Hi Csaba,

Thanks for your reply. The website is currently only on my local dev environment ;o(

But basically what I want to achieve is a button which, after clicking, auto-starts the scrolling down to the next section on the homepage. Does that make sense.

Thanks
Johnny

Hi,

Yes, that makes sense, but I have to inspect your site to know which is the first section on your homepage to give you the correct link, so if you need help with this you may need to upload it to a test server and post here the URL, so then I can help you with this.

Best Regards,
Csaba

Hi Csaba,
The URL is www.adomeit-aufzugservice.de.
Thanks in advance.
Johnny

Hi Csaba,
It also appears that the images are not shown on mobile devices.
Do you know what might causes the issue?
Thanks
Johnny

Hi Casa,
I am so sorry to bother you again, but it also seems that the nav bar is not sticky on mobile devices, which I would like to achieve similar to the larger screens. Maybe you can look at all three issues at the same time?
Thank you so much for your help in advance.
Johnny
PS: Not sure if I have to open all new Posts for each of these issues? Sorry, if I did that wrong.

Hi Casa,

After trial & error I have managed to fix the image issue which was a link related error caused by the migration from dev to live.

The images do show now but they are not responsive on mobile (do not resize) and the parallax effect does not show on mobile device.

So the open issues are:

  1. “Start to scroll” button in “welcome area” on homepage.
  2. Sticky bar on mobile devices.
  3. Responsive images on mobile devices.
  4. Parallax effect on mobile devices.

Sorry for all the communication but was working all night long to get the site online ;o)

Cheers
Johnny

Hi,

  1. Sorry I can’t see the start to scroll button in your Welcome Area, but you can add this anchor point ( link ) to the button to scroll to the first section on your homepage: #services

  2. Sticky bar on mobile devices is disabled, because it will cover a lot of space on your small smartphone screen ( it’s done with many themes ), but you can make it sticky on mobiles too, with this Custom CSS:

@media only screen and (max-width: 991px) {
.is-sticky .top-bar {
    position: fixed !important;
}
}
  1. Can you please clarify which images aren’t showing on mobile devices?

  2. Parallax effect may not work on mobile devices due to device limitations.

Please add the CSS from point 2 to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

You are a star.

1 and 2 worked like a bomb.

  1. The two images in sections (a) KOMPETENZ AUS ERFAHRUNG (red arches in the background) and (b) WISSENSWERTES (white building in the background) are displayed but do not resize down on mobile devices. You can see the full images on a larger screen.
    I guess this is a responsiveness issue?

  2. I have tried on iPhone 5, 6 and 7, the two laters with the latest iOS. Is there any chance to get this working as that would obviously be magic ;o)

Thanks
Johnny

Hi,

  1. No, it’s not a responsive issue, those images are background images which will always cover the background areas, so they don’t fit the screen to show you the full image, only stand-alone images can do that, with background images you can’t do that, you can see that on all websites you may visit the section background images will never show the full image on mobiles.

  2. Unfortunately as is the parallax effect can’t work on iPhones.

Best Regards,
Csaba

Hi,

Thanks for clarification.

Just one more thing regarding the sticky bar on mobile devices:

Would it be possible to amend the custom CSS so the sticky bar would automatically disappear when scrolling, so the user can see the entire page space without the bar, and automatically re-appears when scrolling ends?

Do you know what I mean?

Thanks,
Cai

Hi,

That’s not possible by default, that may require some complex custom javascript coding.

Best Regards,
Csaba

Hi Csaba,

Ok. Thanks for the great support. All sorted then.

Have a good one.

Johnny

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba