Navigačné menu webstránky

Otvoríme si debugger a ideme sa pozrieť ako je robené navigačné menu. Navigačné menu za nás naštýloval už Bootstrap, preto sa budeme snažiť preddefinovaný štýl prepísať.

Vidíme, že menu je tvorené v triede .navbar-default preddefinovane sivou farbou. Zmeníme farbu na bielu a odstránime spodný rám.

.navbar-default {
  background: #fff;
  border: none;
}

Naše menu je posunuté o určitú výšku od slideru. Tento štýl prepíšeme pomocou nastavenia spodného odsadenia na nulu.

.navbar {
  margin-bottom: 0px;
}

Nastavenie loga v triede .navbar-brand a položky menu v triede .navbar-brand upravíme na farbu zhodnú s farbou textu pre linky (odkazy), keďže aj položky menu sú odkaz.

.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a {
  color: #455376;
}

Nastavenie hover efektu pre položky menu bude zhodné s nastavením pre hover efekty na zvyšku webu, preto pridaj kód už k nášmu existujúcemu a:hover nastaveniu. Podarilo sa ti to?

a:hover,
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #c5308a;
  text-decoration: none;
}

Nastavenie loga

Aby sme logo (naše meno) zvýraznili , priradíme mu bold písmo.

.navbar-brand {
  font-weight: bold;
}

Naštýlovanie fotky používateľa pri kontakte. Okolo fotky pridáme okraj šírky 2 pixle modrej farby. A následne fotku odsadíme pomocou marginu od slova kontakt o 5px a vyššie od navigačného menu o -2px.

li a img.img-circle {
  border: 2px solid #455376;
  margin-right: 5px;
  margin-left: auto;
  margin-top: -3px;
}