Question on mouseover effect / interactive arrow / navigation dots

[fabrizio.primavera]

Dear SeaTheme Team,

I have developed a bit more my website, but I have a few remaining problems and I would like to ask your help on them.
Please have a look at my website https://schinaprimavera.com/ and my questions below:

1 – Photo cropped in “About” page
The photo in the “About” page is cropped when looked on a mobile, this is because the top portion of the image goes behind the opaque header bar.
Is it possible to avoid this overlap only on the mobile?

2 – Mouseover effect on project icons
I have introduced a mouseover effect on the project icons in the “home” and “work” pages.
This works well on a desktop, but on the mobile it makes it difficult to open the projects.
On the mobile, the first click shows the filled mask and project title, the second click works only if directed on the project title (centre of the icon).
Is it possible to make the second click more intuitive to use? For example, can I second click any part of the icon and not just the title?

3 – Interactive arrow below feature image
As you can see in each project page (for example https://schinaprimavera.com/mozambique-pre-school/), I have added an arrow to invite the visitor to scroll down and see the rest of the page. This arrow is currently drawn within the feature image itself.
Is it possible to add a similar arrow which is part of the site and interactive (the page scrolles down when clicking on it)?
This should work on both desktop and mobile.

4 – BM Slider navigation dots
The navigation dots on the BM Slider don’t display well on the mobile, as they are oversized and overlap the images.
Please have a look at the homepage.
Is it possible to make them smaller and move them below the slider images on the mobile only?

Thanks in advance for your help.
Kind regards,
Fabrizio

[SeaTheme]

Hi,
Thank you for purchasing our theme.

1. Please paste the custom CSS code to “Appearance > Customize: Additional CSS”

@media (max-width: 767px) {
.responsive-ux.page_from_top.page-id-564 #wrap {
    padding-top: 80px; }
}

2. We will improve it in the next update

3. It is possible to add the clickable area to the whole cover image. If you think it is ok, I will send you the code.

4. I found that the dots are under the slider now.
Please paste the custom CSS code to “Appearance > Customize: Additional CSS” to adjust the dots size.

@media (max-width: 767px) {
.owl-dot > span { 
    width: 6px;
    height: 6px; }
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[fabrizio.primavera]

Many thanks for your quick response.

1 – This code works pefectly, thanks.

2 – Thank you! Would you be able to say when the next update will be released?
Is it possible to find any temporary solution to make it work better in the meantime?

3 – That would work, thank you.
Does it mean that after the click on the feature image, the page will automatically scroll down until the text below?

4 – Great to be able to adjust the dimension of the dots, but on my iPhone they still show above the slider.
Is it possible to move them below? This problem is only on the mobile.
In case it is not possible, can I delete the dots from the mobile visualisation only?

One additional question:
Is it possible to add a custom cursor for the mouse on the desktop visualisation?
For example a small black dot?

Thank you for your help.
Kind regards,
Fabrizio

[SeaTheme]

Hi, welcome

2. Yes, it is next month.
Please go to Appearance>Theme Editor>Air Theme, edit the js/custom.theme.js, paste all code from https://theme.seatheme.net/air/wp-content/themes/air-theme/js/custom.theme.js

3. Yes, it is.

4. Please add the custom CSS:

@media (max-width: 767px) {
.top-slider .owl-dots {
   margin-top: 0;  
 }
}

If you want to hide it, please add the custom CSS:

@media (max-width: 767px) {
.owl-dots {
    display: none;
 }
}

5. There isn’t the option to set the custom cursor.

Best

[fabrizio.primavera]

Thank you very much for the great support!
All the codes work very well.

Could you please send me the code you mentioned above for the point 3? (clickable feature image to activate the scroll down)

Best regards,
Fabrizio

[SeaTheme]

Hi,
Welcome.
Install a custom js plugin like Simple Custom CSS and JS, put the javascript codes by this plugin(Custom CSS & JS > Add Custom JS):

jQuery(document).ready(function( $ ){
  $('html, body').animate({scrollTop:'100vh'}, 300);
  return false; 
});

Best

[fabrizio.primavera]

Thank you for sending the code.
I have installed the plugin and followed your instruction, but unfortunately it doesn’t work as expected.
Please have a look at the snapshot in the link below:

https://drive.google.com/file/d/133MmjXfQ_g3pJR7sTfKMYiKfJK00V7T0/view?usp=sharing

After activating it, each page of the website automatically scrolls down by 100 px as soon as I open them.
I would like the scroll down to activate only after clicking on the feature image.
It should also only apply to the projects pages and not to the other pages.

Thank you in advance.
Best,
Fabrizio

[SeaTheme]

Please update the js code as:

jQuery(document).ready(function( $ ){
  if($('body').hasClass('single')) {
var _h = $(window).height();
  $('.post-cover').on('click',function(){
    $('html, body').animate({scrollTop: _h}, 300);
    return false;
  });
}
});

[Author]

Posts