Как выделить части Нава? - PullRequest
Новая
       4

Как выделить части Нава?

0 голосов
/ 06 марта 2020

Я работаю над созданием собственного портфолио для своей программы UX / UI. У меня есть навигация в стиле со следующим CSS: 

.nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-start: span;
  list-style-type: none;
  font-family: eurostile, sans-serif;
  font-size: 24px;
  justify-items: center;
  background-color: #7510f7;
  margin-right: -10px;
  margin-left: -10px;
  margin-top: -10px;
  padding: 15px;
}

.nav-item a {
  text-decoration: none;
  color: white;
  font-weight: lighter;
}

Каждая навигационная ссылка содержится в одном столбце сетки.

Я пытаюсь выяснить, как я могу получить определенный c столбец сетки для изменения цвета фона, чтобы указать, на какой странице находится пользователь. Это возможно в CSS? Или есть другой способ указать мне, на какой странице находится пользователь?

Редактировать: Вот HTML для Nav: 

<header>
    <nav>
        <ul class="nav-links">
            <li class="nav-item"><a href="home.html">Home</a></li>
            <li class="nav-item"><a href="contextual_inquiry.html">Contextual Inquiry</a></li>
            <li class="nav-item"><a href="interaction_Design.html">Interaction Design</a> </li>
            <li class="nav-item"><a href="skills.html">Skills</a> </li>
            <li class="nav-item"><a href="about.html">About</a> </li>
        </ul>
    </nav>
</header>

Редактировать: я опубликовал веб-сайт для люди, чтобы лучше визуализировать это: https://gnenadov.github.io/portfolio/home

1 Ответ

1 голос
/ 06 марта 2020

вы можете добавить класс может быть active к li прагматично, так как вы должны знать активную страницу, а затем использовать этот класс для стилизации того, что вы хотите

...