Make it possible to fix the site header when scrolling

[tivasyk]

An option somewhere in config.toml or CSS to fix the site header to prevent it from scrolling would be great.

[Lednerb]

When does the header scroll?
Do you mean vertically or horizontally?

On which device (dimensions) does the scrolling occur?

[tivasyk]

there's no error here, it's just a request for en improvement.

When does the header scroll? Do you mean vertically or horizontally?

when the page is scrolled vertically; the header scrolls vertically with the page which is a normal behaviour.

On which device (dimensions) does the scrolling occur?

any device (well, i only checked on a notebook (2048x) and a smartphone (720x).

it would be great to have an option though to fix the header in place and not scroll it with the rest of the contents.

[Lednerb]

Ah okay, now I understand.
So it's a feature request for the desktop version... Yeah, maybe we can implement that similar to the permanentTopNav as an addition.

[Lednerb]

Now I thought about this option a lot ...

I don't think that this would be a feature the most users would ask for, and I would never use this because I love the integrated algolia search and for me, the pages are not very important (just an Impress or Contact me page). When using the algolia search, the space for pages is very limited.

So I think I would not implement this in the theme directly.
Maybe in the future, if many other people request for.

But I can help you, for your site:

• To archive a fixed navigation bar, you have to set the permanentTopNav option to true.

• After that, follow the instructions for Custom colors and fonts.

• open the themes/bilberry-hugo-theme/src/scss/_topnav.scss file and modify this part to the following:

&.permanentTopNav {    
    display: block;
    position: fixed;
    width: 100%;
    z-index: 60;
}

• Finally, you have to modify the src/scss/_header.scss file:

header {
    background-color: $base-color;
    color: $header-text-color;
    height: 20rem;
    display: flex;
    align-items: center;

    padding-top: 65px; // add this line

   ...

• As the last step, run yarn run production inside the theme's src folder.

That should do the trick ;-)

Note: When you're upgrading my original theme (Lednerb/bilberry-hugo-theme) you have to apply these changes again. You can also fork this repository to your own namespace, do the changes there and merge newer versions of my theme to your customized version and then update from there.

[anoff]

I would like this feature as well 😁 Maybe like beautiful jekyll that the navbar actually shrinks and just leaves the home button there. I find it hard to scroll up especially on mobile.
An alternative would be one of those navs that scrolls out but if you scroll up it immediatly pops into view (sorry don't know their name)

[LITUATUI]

Sticky navbar should be the default behavior.

[igor-baiborodine]

@LITUATUI, the stickyNav parameter depends on the permanentTopNav. To make it the default behavior, the permanentTopNav parameter is to be set to true by default too. I updated the Features/Top Navigation Bar section in the README: