引入顶部导航栏后调整实际网站的开始
Adjusting onset of actual website after introducing a top-navigation bar
我已经使用 GitHub 页面建立了一些网站并使用了闰日主题。 Here's the repository containing the theme's original source code and this 是模板在实践中的样子。
因为我想自定义 website more, I added a navigation bar from bootstrap at the top of the page. Afterwards, I adjusted margins and onsets of the Leap Day template code in order for the actual website's contents to start only below the fixed navigation bar (to avoid that the navigation bar overlaps the rest of the website). For that, I adjusted mainly this CSS file。同样在该文件中,我将已经存在于模板中并显示在网站左侧的原始导航栏的名称重命名为 nav2
。自定义(顶部)导航栏称为 navi
。
好吧,毕竟,大多数网站 运行 都很顺利,并且做了它应该做的事情(展示了一些项目)。
然而,在引入额外的顶部导航栏后仍然存在一个问题,即点击当前显示网站的某个部分或子部分的名称不会立即将用户带到相应部分的开头。更长,但用户将在实际网站内容的开头看到的内容位于所请求部分开头下方的某个位置。据我了解,某些部分的开头,例如当用户点击左侧导航栏中的 Introduction
部分名称时,Introduction
在网站上移动到特定高度 y
。但是,现在顶部的附加导航栏已添加,因此所有其他内容都已向下移动,显示部分开始的位置 y
被顶部的某些横幅隐藏页面。
因此,我想知道是否有人知道上述css中的许多变量中的哪一个
要更改的文件,以便将部分 y
的开始点移到网站的更下方。我已经尝试更改很多参数,但我无法看到哪个控制我称为 y
.
的点
为了让我的问题更清楚一点,请考虑以下两张图片:
这是应该发生的事情:
实际情况是这样的:
非常感谢您!
您可以尝试这个 Whosebug 问题中列出的一些解决方案:Fixed page header overlaps in-page anchors。
最常见的似乎是将 padding-top
添加到等于导航栏高度的 a
元素。
我已经使用 GitHub 页面建立了一些网站并使用了闰日主题。 Here's the repository containing the theme's original source code and this 是模板在实践中的样子。
因为我想自定义 website more, I added a navigation bar from bootstrap at the top of the page. Afterwards, I adjusted margins and onsets of the Leap Day template code in order for the actual website's contents to start only below the fixed navigation bar (to avoid that the navigation bar overlaps the rest of the website). For that, I adjusted mainly this CSS file。同样在该文件中,我将已经存在于模板中并显示在网站左侧的原始导航栏的名称重命名为 nav2
。自定义(顶部)导航栏称为 navi
。
好吧,毕竟,大多数网站 运行 都很顺利,并且做了它应该做的事情(展示了一些项目)。
然而,在引入额外的顶部导航栏后仍然存在一个问题,即点击当前显示网站的某个部分或子部分的名称不会立即将用户带到相应部分的开头。更长,但用户将在实际网站内容的开头看到的内容位于所请求部分开头下方的某个位置。据我了解,某些部分的开头,例如当用户点击左侧导航栏中的 Introduction
部分名称时,Introduction
在网站上移动到特定高度 y
。但是,现在顶部的附加导航栏已添加,因此所有其他内容都已向下移动,显示部分开始的位置 y
被顶部的某些横幅隐藏页面。
因此,我想知道是否有人知道上述css中的许多变量中的哪一个
要更改的文件,以便将部分 y
的开始点移到网站的更下方。我已经尝试更改很多参数,但我无法看到哪个控制我称为 y
.
为了让我的问题更清楚一点,请考虑以下两张图片:
这是应该发生的事情:
实际情况是这样的:
非常感谢您!
您可以尝试这个 Whosebug 问题中列出的一些解决方案:Fixed page header overlaps in-page anchors。
最常见的似乎是将 padding-top
添加到等于导航栏高度的 a
元素。