I am using the most recent Hugo version and Academic theme. I noticed that different pages in my site have the same headers but different spacing of the menus in the header. For example, visit my site and click the “Teaching” menu. You’ll notice that my name (in the top left) shifts to the right. Upon investigation, one set of menus are positioned in one place and another set are positioned in another:
- Set 1: Teaching, Contact, Research
- Set 2: Home, Resources
Cannot identify the possible source of this for the life of me. Any idea? For reference, you can find my source files here on GitHub.
Seems like the main difference is the scroll bar. On pages with shorter content, the scroll bar is gone and the content shifts right. I would guess that some part of your header or nav bar is floated right, which would definitely cause that response.
Good catch - it is indeed only on scrollbar pages. However, the Academic theme contains
config\default\params.toml where users can specify the nav bar contents. The default is to have it left-aligned and changing the below from
true doesn’t fix the issue.
# Align the main menu to the right of the page? (true/false)
menu_align_right = false
This is apparently an instance of the Jumping Scrollbar. The best solution (found here) appears to be some variant of including css to add space on the side opposite the scrollbar.
The problem is that I’m not quite sure how to implement this css change in the Academic theme. As found in my source repo, I’ve copied in the
layouts folder from the theme to root and suspect I should copy the css somewhere into
layout/partials/ but it’s not clear where to add it both with respect to the file name and location within the file. Here are some of the contenders: