Navbar height&style change in homepage

[hiiiyilingzhang]

Dear developer,
Thanks for the nice template! We really love it.

v1.0.0 user here, I would like to seek your help about how to adjust the height of navbar in homepage. I hope I can remain the same navbar style with other pages but I can't figure out where to modify that. Little bit like the pre-release version.

Many thanks!!
Elaine

[vincerubinetti]

Hi Elaine

If you want to just reduce the height of the header on the homepage, you can reduce the $big-padding variable in _styles/header.scss.

If you want to make the homepage header look the same as the header on every other page, you can remove the data-big attribute on the <header> tag in _includes/header.html. You can see that it gets set here, when the url is equal to / (the homepage):
https://github.com/greenelab/lab-website-template/blob/main/_includes/header.html#L15-L17

You could theoretically make some other arbitrary page have a big header if you wanted.

[hiiiyilingzhang]

Wow... It really works!! Many thanks~

Beside, may I know how to remove the dark semi-transparent cover on background/footer image? And change the text font and color in header/footer ? I am really new to web development. Much appreciated for your help~

Elaine

[vincerubinetti]

The "semi-transparent cover" is actually the background image being transparent, and letting through the solid background color underneath come through. We do that to make sure your text always has enough contrast with the background and is readable for people with vision impairment. However, if you want to change, set .background:before opacity to 1 in _styles/background.scss. This will make the background image fully visible.

To change the font colors in the header/footer, you would just add a color definition under header in _styles/header.scss, and modify the other color definitions in the file as needed (there's one for the subtitle, nav links, etc). Try to use one of the built-in color variables in _styles/-theme.scss, because there's versions for light and dark backgrounds. But if you know you're always going to keep your header/footer dark or light, you can just hard-code hex values like #ff00ff. Or you could even add your own color variable in -theme.scss, like --tertiary: #123456, and use it like var(--tertiary) wherever needed.

The fonts in the header come from the --title and --heading variables in -theme.scss as well. See this docs page for changing fonts.

[vincerubinetti]

In general, to customize your site to this level of detail, some knowledge of web development will be necessary. We can't provide high-level options for every single CSS property. Thus, for certain things, you have to get deep into the code and edit it yourself.

[hiiiyilingzhang]

I will catch up with some basic knowledge first. Thanks for your patience and detailed explanation!!