Menu jumps when blog has been scrolled down

[simrandhamija]

Hi, I installed your theme and created a post. When I scroll down on the post and then expand the menu, the "back to top" and "next" button jump.

This happens only when I have a single post on the entire website. I created another post just to stop this behaviour. You can have a look at my blog here.

[probberechts]

I tried to recreate this, but didn't experience any issues. Is this the action your talking about?

[simrandhamija]

Hi. Yes, that is exactly the action this issue is about. This is what I am currently facing:

I have modified the source files a little. This is my config.yml for the theme cactus:

##############################################################################
# Content
##############################################################################

# Link to a page that gives an overview of all your projects.
# This can be an external link (e.g., to you GitHub profile) or to another
# page within your website.
#projects_url: http://github.com/probberechts

# Set the page direction to RTL or LTR. default is LTR. (if you set it 'rtl', the 'vazir' font will be loaded.)
direction: ltr
# Configure the navigation menu.
# A pair 'Key: url' will result in a link to 'url' with the name 'Key' in the
# navigation menu. Optionally, you can add translations for the 'Key' in
# languages/*.yml
nav:
  home: /home/
  about: /about/
  articles: /archives/

# Links to your social media accounts.
# The keys should correspond to Fontawesome icon names
# (see https://fontawesome.com/icons?d=gallery&s=brands);
# only 'mail' is an exception.
social_links:
#  github: https://github.com/simrandhamija
#  twitter: https://twitter.com/thesulkysultan
  #facebook: /
#  stack-overflow: https://stackoverflow.com/users/5076511/fabulous
#  linkedin: https://linkedin.com/in/simran-dhamija-6411159b/
#  mail: mailto:simrandhamija30@gmail.com

# Customize the overview with displaying a tagcloud on the index page.
# Options: https://hexo.io/docs/helpers.html#tagcloud
tags_overview: true

# Customize the overview with the most recent blog posts on the index page.
# Options:
#   - show_all_posts: whether to show all available posts.
#   - post_count: whether to show only the x most recent posts.
posts_overview:
  show_all_posts: false
  post_count: 3

##############################################################################
# Look and Feel
##############################################################################

# Customize the logo (i.e., the cactus) in the header.
# Options:
#   - enabled: whether to show (true) or hide (false) the logo.
#   - width: width of the logo in pixel units
#   - height: height of the logo in pixel units
#   - url: where the logo can be found
#   - gravatar: whether to use your Gravatar as the logo
logo:
  enabled: true
  width: 100
  height: 100
  url: /images/logo.png
  gravatar: false

# Customize the favicons.
# Cactus supports a limited set of the three most important icons:
#   - desktop: The classic favion.ico file.
#   - android: A 192x192 PNG file.
#   - apple:  A 180x180 PNG file.
# These can be generated with http://realfavicongenerator.net/
# Options:
#   - url: where the icon can be found
#   - gravatar: whether to create a favicon from your Gravatar
favicon:
  desktop:
    url: /images/favicon.ico
    gravatar: false
  android:
    url: /images/android-chrome-192x192.png
    gravatar: false
  apple:
    url: /images/apple-touch-icon.png
    gravatar: false

# The color scheme that should be used to highlight codeblocks.
# See source/css/_highlight for a list of all available color schemes.
# highlight: rainbow

# Set the color scheme.
# Available color schemes are 'dark', 'light', 'classic' and 'white'.
# Alternatively, add your own custom color scheme to source/css/_colors.
colorscheme: white

# Maximal width of the page in rem units.
page_width: 48

##############################################################################
# Miscellaneous
##############################################################################

# Enable or disable the RSS feed.
rss: false

# Turn your web pages into graph objects (see http://ogp.me).
open_graph:
  fb_app_id:
  fb_admins:
  twitter_id:
  google_plus:

##############################################################################
# Plugins
##############################################################################

# Fill in your Disqus Comments Shortname to enable Disqus comments.
disqus:
  enabled: true
  shortname: http-simran-dhamija-in

# Fill in your Google Analytics tracking ID to enable Google Analytics.
google_analytics:
  enabled: false
  id: UA-86660611-1

# Fill in your Baidu Analytics tracking ID to enable Baidu Analytics.
baidu_analytics:
  enabled: false
  id: 2e6da3c375c8a87f5b664cea6d4cb29c

# Fill in you Gravatar user id / email if you want to use your gravatar as the
# logo and/or favicons of you website.
gravatar:
  email: name@email.com

image_caption:
enable: true
class_name:

[probberechts]

I can't reproduce this. I'll leave it open for a while and see if someone else encounters the same problem.

[thang-d]

I have met the same problem. I see my posts and I recognized that when my TOC is empty (don't use any heading # markdown in the post) the "back to top" and "next" button jumped. Besides although I'm in a top of the post, the navigator does not show for me. You can test it with a single post, do not have any heading or anything about TOC, it will show for you.

[probberechts]

Even when the TOC is empty, I can't reproduce this. Do you have any suggestions on how to fix this? Which browser do you use? Can you test it in a different browser? Also, make sure to disable all your plugins.

[thang-d]

Oh, I just tested on another computer with a post has TOC empty. Both are using Chrome browser (same version).

The computer has a larger screen (24 ins) it doesn't show any wrong but with a small screen (15 ins) the "back to top" and "next" button jumped when hovered to it. I tried remove onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();" of button prev in action_desktop.ejs, the menu didn't jump again when hovering to button prev. But when I tried to minimize browser on screen 24 ins, it's working ok, not jump. Do you have any idea in this case? Also, I make sure to disable all my plugins.