CSS Bootstrap - jak nastavit offset pro kotvu pod navbarem (anchor)

bootstrap html css programovani

Podíváme se na řešení nepříjemnosti, která spočívá v tom, že když používáme Bootstrap s navbarem a odkazujeme na nějakou kotvu přes a href="#kotva", tak se nám daný blok shora částečně skryje navbarem. Vyřešíme to nastavením offsetu.

Ukážeme si tři možnosti, jak offset vyřešit:

1.) Čisté CSS

Používal jsem řešení č. 2, ale pak jsem objevil toto super easy řešení a vyhovuje mi nejvíce.

html { 
    scroll-padding-top: 125px; 
}

2.) CSS+HTML

Upravíme css styl - přidáme třídu anchor-offset s offsetem 100px

.anchor-offset:before {
    height: 100px;
    content: "";
    display:block;
}

Upravíme HTML pro element s kotvou - přidáme třídu anchor-offset

<section class="section anchor-offset" id="anchor">
    <div class="container">
        ....
    </div>
</section>

3.) SweetScroll

Pokud používáme SweetScroll, tak můžeme offset vyřešit tímto způsobem.

Nad navbar přidáme třídu přímo k tomuto účelu, zde js-header

<header class="js-header">
    <div class="nav">
        <div class="container">
            <nav class="navbar navbar-main navbar-expand-lg">

Upravíme Sweetscroll, aby použil offset 100

import SweetScroll from 'sweet-scroll';

document.addEventListener(
  'DOMContentLoaded',
  () => {
    const scroller = new SweetScroll({
      duration: 800,
      easing: 'easeInOutCubic',
      offset: (document.querySelector('.js-header').clientHeight * -1) - 100
    });
  }

);