Я не могу исправить мою панель навигации с CSS - PullRequest
Новая
       33

Я не могу исправить мою панель навигации с CSS

0 голосов
/ 01 мая 2020

Мне нужна помощь с кодом проекта, над которым я работал. Я не могу исправить панель навигации, поэтому она всегда отображается в верхней части области просмотра. Я понимаю правила положения CSS, и я искал примеры и учебные пособия, но по какой-то причине я застрял.

Я пытался зафиксировать положение для панели навигации и относительно контейнер, наряду со многими другими изменениями. Все, что я пробовал, портит мой контент. Думаю, это один из тех моментов, когда вам нужна помощь.

Это ссылка на проект и код панели навигации без каких-либо правил позиции.

https://codepen.io/aitormorgado/pen/MWayXPy

#title-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Aclonica", serif;
  color: #281c1c;
  font-size: 6rem;
  text-transform: uppercase;
  margin: 3rem 1rem;
}

li {
  list-style: none;
}

#header-img {
  width: 6rem;
  padding-right: 1.5rem;
}

#nav-bar ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Libre Baskerville", serif;
  background-color: #990000;
  color: #e0e0e0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  text-transform: uppercase;
  font-size: 4rem;
}

#nav-bar ul li {
  border: 2px solid black;
  width: 100%;
  text-align: center;
}

#nav-bar ul li a {
  text-decoration: none;
  color: inherit;
  padding: 1.4rem;
  display: block;
}

#nav-bar ul li:hover {
  background: #cc3300;
}

Миллион спасибо за вашу помощь!

1 Ответ

0 голосов
/ 01 мая 2020

в соответствии с вашим вопросом, я только что поменял маленькую вещь в вашем коде, и теперь ваш заголовок фиксируется вверху при прокрутке,

все, что вам нужно сделать, это использовать

#header { position: sticky; top: 0; z-index: 99999; background-color: #E0E0E0; }

в вашем заголовке. и цвет фона задан так, чтобы остальные нижние элементы не появлялись под ним при прокрутке. Если нужно что-то еще, или я не понял вашего вопроса, то не стесняйтесь поделиться. просто проверьте codepen здесь.

...