-
AuthorPosts
-
July 27, 2017 at 10:32 pm #830835
Hey Guys…
The new mobile menu is very cool, thank you!
Can you help me with one thing…the back to top arrow isn’t showing on mobile anymore. Can you provide me with some quick css for this?Thanks for your help
GaryJuly 28, 2017 at 8:13 am #830930Hey alliancepp,
To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
Best regards,
John TorvikAugust 3, 2017 at 12:22 am #833712Thanks John. The url is below.
Have a great day
GaryAugust 4, 2017 at 6:42 am #834177Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { .responsive #scroll-top-link { display: block !important; } }
Best regards,
RikardAugust 4, 2017 at 5:12 pm #834405Rikard, Good morning.
That worked perfectly. Now the back to top arrow is working. Thank you.One other issue I noticed. When I view Enfold sites vertically on the ipad, the main menu is getting covered up by the logo…it’s not going to the mobile menu. Can you help me with that as well. I put a link to an image preview below.
Thanks for your expertise!
GaryAugust 5, 2017 at 9:54 am #834665Hi Gary,
Please try the solution presented here: http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/
Please let us know if that works for you.
Best regards,
SarahApril 3, 2020 at 2:47 am #1200343Hello @rikard .. is there a way we can display this when someone reaches 75% of the overall page and not right after you start scrolling?
April 4, 2020 at 5:06 am #1200743Hi,
Provide a link to this site/page in question so we can look into this issue further.
Best regards,
Jordan ShannonApril 4, 2020 at 2:38 pm #1200799I am addressing “the back to top arrow” on mobile
is there away we can let it display when we reach 75% scroll to the end of the page ?April 4, 2020 at 8:44 pm #1200850Hi,
As I’m sure you are aware, the “scroll-top-link” doesn’t show on mobile screens by default, so you would need to use some css like this for it to show:@media only screen and (max-width: 767px){ .responsive #scroll-top-link { display: block; } }
But for your question to have the button show when the scroll reaches 75% of the page, after you apply the css please edit
\wp-content\themes\enfold\js\avia.js
on line 862 you should findif(st < 500)
change toif(st < $(document).height()*0.75)
Then clear your browser cache and any cache plugin, and check.Best regards,
MikeApril 4, 2020 at 11:40 pm #1200874April 5, 2020 at 4:45 am #1200905Hi,
I see that you have the Enfold Theme Options > Performance > JS & CSS file merging and compression enabled so perhaps the original avia.js is still loading. Try disabling the file merging and compression and clearing your caches again.
I tested this on my localhost before posting so I’m sure it works, but it still took a few tries to clear the cache and load the new avia.jsBest regards,
MikeApril 5, 2020 at 7:01 pm #1200988Ok @Mike
I will try it
Thank you very much !April 5, 2020 at 11:05 pm #1201028September 17, 2021 at 4:27 am #1321296Hello,
On this page > https://kriesi.at/documentation/enfold/menu/#scroll-to-top
Change the background color using the below CSS
/* Background */ #scroll-top-link { background-color: #1ec5bc; }
This CSS does nothing. Changed color to #000000 to check. Cleared server and browser cache. Still nothing. Added !important still nothing.
ALSO, I’d like to change background color AND background color on hover, independently.
Any ideas?
Thanks,
Jasmer
- This reply was modified 3 years, 2 months ago by Jasmer. Reason: added url in private content
September 17, 2021 at 12:28 pm #1321364Hi,
Thank you for the link to your site, I couldn’t find your attempted css in your merged css, but perhaps you have a missing bracket, unclosed comment or some other error in your stylesheet, nonetheless this css will change the background color and arrow and on mouse-over:#top #scroll-top-link { background-color: #000; } #top #scroll-top-link:before { color: #fff; } #top #scroll-top-link:hover { background-color: #F7F7F8; } #top #scroll-top-link:hover:before { color: #000; }
After applying the css, please clear your browser cache and check.
If this doesn’t work for you then it could point to an error in your stylesheet, try this in the WordPress ▸ Customize ▸ Additional CSS field.Best regards,
MikeSeptember 18, 2021 at 4:35 am #1321429Thanks Mike! Worked perfectly!
September 18, 2021 at 5:40 am #1321432Hi Mike,
How can I hide the tooltips on ONLY the Back To Top Arrow? I think CSS rather than a functions.php correct?
See screenshot below
Thanks,
Jas
September 18, 2021 at 6:23 pm #1321454Hi,
Thank you for the screenshot, on the right side, when you hover over the scroll to top button the tooltip “Scroll to top” is created by the title attribute of the element by a browser function, to remove this you will need to remove the title of the element which can be done with the script, try adding this code to the end of your functions.php file in Appearance ▸ Editor:function remove_title_from_scroll_top_on_hover() { ?> <script> (function($){ $("#scroll-top-link").hover(function(){ $(this).removeAttr("title"); }); })(jQuery); </script> <?php } add_action('wp_footer', 'remove_title_from_scroll_top_on_hover');
The link information on the left side is also from a browser function but it can not be hidden by the site as it is user side information only.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.