CSS Bară de navigare. Bară orizontală gri. Bară de navigare sticky.

Bară orizontală gri

Un exemplu de bară de navigare orizontală gri, cu un border subțire gri:



Exemplu:

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

Sticky Navbar

Adăugați position: sticky; la <ul> pentru a crea sticky navbar.

Un element sticky trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție dată de offset este întâlnită în viewport - apoi se „lipeste”la loc (ca position:fixed).





Exemplu:

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Notă: Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai sus). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.