If site's title is very long, then some content is hidden

[hawkeye116477]

It's similar case as mentioned at: https://stackoverflow.com/questions/14735274/bootstrap-css-hides-a-portion-of-a-container-below-navbar-navbar-fixed-top. That happens only for mobile devices.

To reproduce

1. Write some long title for website, for example Polish Polish Polish Polish Polish Polish Polish Polish.
2. Don't add logo.
3. Write some content.
4. See the problem by switching to Pixel 7 resolution.

Screenshots

Additional context

I added this code to my script to fix that:

window.addEventListener('load', function () {
var onResize = function() {
    // apply dynamic padding at the top of the body according to the fixed navbar height
    if (window.innerWidth <= 1024) {
        document.querySelector("body").style.paddingTop = (document.querySelector(".navbar-fixed-top").offsetHeight - 100) + "px";
    }
    else {
        document.querySelector("body").style.paddingTop = "";
    }

  };
  
  // attach the function to the window resize event
  window.addEventListener("resize", (event) => {
    onResize();
  });
  
  // call it also when the page is ready after load or reload
  onResize();
});

but maybe someone knows better solution.

[markdumay]

Thanks for sharing your example @hawkeye116477! Personally, I try to avoid the use of (critical) JavaScript, as it tends to negatively impact page load times. Additionally, your code example does not adjust the scroll offset properly. For example, see the result when using "On this page" while visiting https://demo.gethinode.com/en/blog/bootstrap-elements/ on a small screen.

An alternative approach could be to use a dynamic offset variable in CSS. The offset is different pending the size of the navbar (which is a breakpoint that toggles the collapse behavior). I've submitted an example to the offset branch, happy to hear your thoughts!

To reproduce, use the following commands from the command line (using npm):

git clone https://github.com/gethinode/hinode.git -b offset offset
cd offset
npm i

Alter the following parameter in exampleSite/config/_default/hugo.toml:

title = "A very long site title that hides some content"

Additionally, adjust the following variables in exampleSite/config/_default/params.toml:

[navigation]
    logo = ""
    # logo = "/img/logo_icon.svg"
    offset = "5.5rem"
    # offsetXS is a new variable
    offsetXS = "8.5rem"

Run a local site:

npm run start:example

[hawkeye116477]

I tested and looks like that's very good solution. Thanks.

[markdumay]

Great! I've made a few additional changes and merged the code with the main repo: #869