Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • July 27, 2017 at 10:32 pm #830835
    alliancepp

    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
    Gary

    July 28, 2017 at 8:13 am #830930
    John Torvik

    Hey 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 Torvik

    August 3, 2017 at 12:22 am #833712
    alliancepp

    Thanks John. The url is below.
    Have a great day
    Gary

    August 4, 2017 at 6:42 am #834177
    Rikard

    Hi,

    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,
    Rikard

    August 4, 2017 at 5:12 pm #834405
    alliancepp

    Rikard, 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!
    Gary

    August 5, 2017 at 9:54 am #834665
    Sarah

    Hi 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,
    Sarah

    April 3, 2020 at 2:47 am #1200343
    Cloudypro

    Hello @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 #1200743
    Jordan Shannon

    Hi,

    Provide a link to this site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    April 4, 2020 at 2:38 pm #1200799
    Cloudypro

    I 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 #1200850
    Mike

    Hi,
    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 find if(st < 500) change to if(st < $(document).height()*0.75)
    Then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    April 4, 2020 at 11:40 pm #1200874
    Cloudypro

    Hello @Mike
    I am aware of the first code !
    The 75% code did not work
    i did exactly what you said
    The moment i start scrolling, then i get this arrow !
    (cleared cache and purged that page but it didnt work )

    • This reply was modified 4 years, 7 months ago by Cloudypro.
    April 5, 2020 at 4:45 am #1200905
    Mike

    Hi,
    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.js

    Best regards,
    Mike

    April 5, 2020 at 7:01 pm #1200988
    Cloudypro

    Ok @Mike
    I will try it
    Thank you very much !

    April 5, 2020 at 11:05 pm #1201028
    Mike

    Hi,
    Happy to help.

    Best regards,
    Mike

    September 17, 2021 at 4:27 am #1321296
    Jasmer

    Hello,

    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 #1321364
    Mike

    Hi,
    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,
    Mike

    September 18, 2021 at 4:35 am #1321429
    Jasmer

    Thanks Mike! Worked perfectly!

    September 18, 2021 at 5:40 am #1321432
    Jasmer

    Hi 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 #1321454
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.