Почему моя навигационная панель остается в левой части страницы, когда я устанавливаю фиксированный режим? - PullRequest
Новая
       5

Почему моя навигационная панель остается в левой части страницы, когда я устанавливаю фиксированный режим?

1 голос
/ 04 августа 2020

Я пытаюсь сделать фиксированную навигационную панель для своего сайта. Когда он не исправлен, он работает отлично, но когда я пытаюсь сделать 

position: fixed;

, он портится и застревает влево, и я не мог понять, почему. Вот код, спасибо. 

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 13vh;
  background-color: #d6e0e4;
  position: fixed;
}

.logo {
  color: black;
  letter-spacing: 5px;
  font-size: 45px;
  font-family: harlow;
}

.navlinks {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

.navlinks li {
  list-style: none;
}

.navlinks a {
  color: black;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bolder;
  font-size: 25px;
  font-family: 'Mulish', sans-serif;
  transition: 250ms;
}
:

<body>
  <nav>
    <div class="logo">

      <h4>Me</h4>

    </div>
    <ul class="navlinks">

      <li><a href="#">Home</a></li>
      <li><a href="#about">About Me</a></li>
      <li><a href="#works">Works</a></li>
      <li><a href="#">Contact Me</a></li>
      <li><a href="#">Tr</a></li>
      <li><a href="#">En</a></li>
    </ul>
  </nav>
</body>

Ответы [ 2 ]

2 голосов
/ 04 августа 2020

position:fixed позиционирует ваш блок относительно страницы. Вам нужно использовать top, right, bottom и / или left, чтобы разместить его. Он также автоматически сжимается, чтобы соответствовать его содержимому.

fixed: [...] Его окончательное положение определяется значениями top, right, bottom и left.

- https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

В большинстве случаев абсолютно позиционированные элементы, для которых height и width установлены на auto, имеют размер, соответствующий их содержимому. Однако можно сделать так, чтобы незамещенные, абсолютно позиционированные элементы заполняли доступное вертикальное пространство, указав как top, так и bottom и оставив height неопределенным (то есть auto). Их также можно сделать так, чтобы они заполняли доступное горизонтальное пространство, указав left и right и оставив width как auto.

- https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning

В ваших nav правилах отсутствует width: 100%; или left: 0; right: 0;.

1 голос
/ 04 августа 2020

это потому, что когда вы фиксируете положение, оно сжимается, чтобы обернуть его дочерними элементами и ничего больше. вам нужно установить ширину для вашей навигации. также я добавил margin:0 для тела, чтобы вы могли иметь его без ненужных пробелов. 

body {
  margin: 0;
  /* remove margin from body */
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 13vh;
  background-color: #d6e0e4;
  position: fixed;
  width: 100%;
  /* Set full window width; */
}

.logo {
  color: black;
  letter-spacing: 5px;
  font-size: 45px;
  font-family: harlow;
}

.navlinks {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

.navlinks li {
  list-style: none;
}

.navlinks a {
  color: black;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bolder;
  font-size: 25px;
  font-family: 'Mulish', sans-serif;
  transition: 250ms;
}
<body>
  <nav>
    <div class="logo">

      <h4>Me</h4>

    </div>
    <ul class="navlinks">

      <li><a href="#">Home</a></li>
      <li><a href="#about">About Me</a></li>
      <li><a href="#works">Works</a></li>
      <li><a href="#">Contact Me</a></li>
      <li><a href="#">Tr</a></li>
      <li><a href="#">En</a></li>
    </ul>
  </nav>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...