Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 17, 2018 at 7:17 pm #958318
    Eleina_Shinn

    Hi: I have searched the forum and tried a bunch of code you have provided to make the sidebar menu stick, so you can always see it, but also scroll, so the bottom of the menu isn’t cut off. I’ve tried code I found on this forum, and although I can make it stick, the bottom of the menu is cut off, it doesn’t scroll, so I can’t see the last item or two on the menu – just can’t find a way with this men for viewers to get where they want to go no matter where they are on the page?

    Here’s my site:
    https://vidagraphicdesign.com

    Here’s the some Avada’s sample sites – this is what I mean, as far as how the side menu should work:

    Home

    Home

    Home

    Maybe I’m missing something? The sticky menu option is gone with the sidebar menu, so not sure what to do here. Must be a simple answer I’m missing. So sorry.

    May 21, 2018 at 11:36 am #959676
    Ismael

    Hey Eleina_Shinn,

    Thank you for using Enfold.

    Did you set the General Layout > Sticky Sidebar menu settings to the first option? It’s going to be sticky as long as the sidebar is smaller than the screen or viewport height.

    and although I can make it stick,

    How do you make it stick? What are the modifications?

    Best regards,
    Ismael

    October 6, 2020 at 4:13 pm #1250876
    rasmusheil

    Hey

    I have the same problem…
    I want it to stick always, but menu has to scroll in smaller screens too because last menu buttons are cut off.

    I can’t see mail social button when it is sticky always.
    Can you help?

    Thank you
    Rasmus

    October 8, 2020 at 11:31 am #1251377
    Ismael

    Hi,

    Thank you for the inquiry.

    The sticky option is not working as expected because of this css code. 

    .html_header_sidebar #top #header.av_always_sticky {
	position: fixed;
	-webkit-backface-visibility: hidden;
}

    This makes the header sticky at all times regardless of its height, which breaks the default behavior.

    Best regards,
    Ismael

    October 8, 2020 at 11:50 am #1251384
    rasmusheil

    This is not what I meant.
    I want my sidebar menu to be sticky always.
    Problem is that some elements (mail social icon) is hidden in smaller screen (1440×900) and I can’t use this mail button.

    Is it possible to be sticky but scroll only until the end of the last menu element (mail social button)?

    Thank you :)

    October 9, 2020 at 12:22 pm #1251681
    Ismael

    Hi,

    Is it possible to be sticky but scroll only until the end of the last menu element (mail social button)?

    This is not possible, unfortunately. The theme will only make the header sticky as long as its height is less than the browser view port. Otherwise, it will scroll along with the content to make sure that the content of the sidebar or side header is visible.

    Best regards,
    Ismael

    October 9, 2020 at 1:29 pm #1251697
    rasmusheil

    Thank you Ismael!

    But can you or anyone of your colleagues suggest some other solutions for achieving this?

    October 9, 2020 at 2:14 pm #1251712
    Ismael

    Hi,

    We will forward the thread to our channel so that the rest of the team could check it. Thank you for your patience.

    Best regards,
    Ismael

    October 10, 2020 at 2:45 pm #1251873
    Mike

    Hi,
    Thank you for the login and link to your site, I first deactivated the Enfold Theme Options > General Layout > Sticky Sidebar menu option:
    2020-10-10_074228.jpg
    then I added this code to the end of your functions.php file in Appearance > Editor:

    function custom_sidebar_header_sticky(){
  ?>
  <script>
(function ($) {
  $(window).scroll(function (e) {
    var $sticky = $('.html_header_sidebar #top #header');
    var width = $(window).width()
    var position = ($sticky.css('position') == 'fixed');
    if ($(this).scrollTop() > 100 && width >= 767 && !position) {
      $sticky.css({ 'position': 'fixed', 'top': '-100px' });
      $sticky.next().css('float', 'right');
      $sticky.addClass('fixed_element_style');
    }
    if ($(this).scrollTop() < 100 && position) {
      $sticky.css({ 'position': 'absolute', 'top': '0px' });
      $sticky.removeClass('fixed_element_style');
    }
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_sidebar_header_sticky');

    and now in my test the sidebar header now allows enough scroll to show the mail social button for “tablet” & “desktop”
    Please clear your browser cache and check.

    Best regards,
    Mike

    October 15, 2020 at 3:38 pm #1253052
    rasmusheil

    Thank you Enfold theme and thank you very much Mike! Life saver :)

    Best regards
    Rasmus

    October 16, 2020 at 1:09 pm #1253246
    Mike

    Hi,
    Glad to hear that this helped, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

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