Front-end zmiana położenia tekstu ze względu na podkreślenie linków nawigacji.

Question

Dzień dobry :) Jestem tu nowy i przybyłem z zapytaniem. Mianowicie mam problem z moim kodem strony internetowej. Nad header'em znajduje się nawigacja. Po najechaniu na link nawigacji pojawia się pod nim border, który celowo sobie ustawiłem, jednak border ten powoduje iż napis header'a przemieszcza się w dół o te 5px. Chciałbym, aby napis ten nie zmieniał swojego położenia, był niezależny od tego co dzieje się powyżej strony.

Zamieszczam kod:
 

  <header id="main">
    <div class="topbar">
      <div class="container">
        <div class="row text-center">
          <div class="topbar-l text-white col-md-4">
            <p>36-230 Cracow ul. Długa 12</p>
          </div>

          <div class="topbar-center col-md-4">
            <img src="imgs/logo.png" style="opacity: 0.8;">
          </div>

          <div class="topbar-r text-white col-md-4">
            <p>+48 222 555 222 | kontakt@trattoria.pl</p>
          </div>
        </div>
      </div>
    </div>

    <nav class="navbar navbar-default navbar-expand-md navbar-dark">
      <div class="container">
          <ul class="navbar-nav ml-auto mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Strona główna</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">O nas</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Karta dań</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Kontakt</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="header-content">
      <div class="container">
        <h1 style="font-size: 48px;">Najlepsza restauracja w mieście!</h1>
        <p style="font-size: 24px;">Rabat 20% na drugą pizze</p>
      </div>
    </div>
  </header>

I CSS:

body {
  font-family: 'Ubuntu', sans-serif !important;
}
::-webkit-scrollbar {
    display: none !important;
}
#main {
  background: url('imgs/bg-main.jpg') center/cover no-repeat;
  height: 100vh;
  background-attachment: fixed;
}
.header-content {
  padding-top: 25vh;
  color: white;
  text-align: center;
  font-family: 'Dancing Script' !important;
}
.header-content h1 {
  font-weight: 700;
  letter-spacing: 2px;
}
.header-content p {
  font-style: italic;
}
.btn-header {
  color: white !important;
}
.btn-header:hover {
  background-color: white;
  color: #30475e !important;
}
.nav-item {
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.nav-link:hover {
  color: #ff6363 !important;
  border-bottom: 5px dotted #ff7171;
}
.topbar-l,
.topbar-r {
  padding-top: 36px !important;
}
.topbar-center {
  padding-top: 20px !important;
}
@media (max-width: 768px) {
  .nav-item {
    padding: 0px !important;
    margin: 0px !important;
    text-align: center !important;
  }
  .topbar-l {
    padding: 10px !important;
  }
  .topbar-r {
    padding: 25px !important;
  }
  .topbar-center {
    padding: 0px !important;
  }
  .header-content {
    padding-top: 12vh;

  }
  .header-content h1 {
    font-size: 26px !important;
  }
  .header-content p1 {
    font-size: 14px !important;
  }
}

Prosiłbym o pomoc :) Z góry dziękuje i pozdrawiam.

Answer 1

Sprawdziłem nic takiego u mnie nie nastąpiło.

 

Czy nie chodzi Ci bardziej o ten przeskok w momencie zaznaczenia "h1" i przesunięcia myszką w dół? Wtedy cała strona zmienia swoje położenie a wybierając z nawigacji "Strona główna" wraca na swoje miejsce, jeśli tak to przez wielkość div tak się robi.

Comments

Nie rozumiem chyba co masz na myśli :/. Problem u mnie na 3 różnych przeglądarkach pojawia się tylko w momencie najechania na link z nawigacji kiedy pojawia się pod nim border, ponieważ nagłówek <h1>, <p1> zniżają swoje położenie o 5 pikseli. Wcześniej nie miałem tego problemu nie mogę dojść do tego gdzie leży problem. Apropo tematu pytania. Wcześniej spotkałem się z jeszcze jednym problemem przy tworzeniu collapsowanego menu na wersje mobilną. Rozwinięcie go powodowało znaczną zmianę położenia znaczników tekstowych. Chciałem żeby rozwinięcie nawigacji je zasłoniło (było od nich niezależne). Udało mi się to naprawić tylko przy zastosowaniu fixed-top dla nawigacji, jednak w momencie, w którym nie chcę aby nawigacja była sticky to nie wiem jak naprawić ten problem.