Навбар блокирует возможность нажатия ссылок внутри - PullRequest
Новая
       9

Навбар блокирует возможность нажатия ссылок внутри

1 голос
/ 30 июня 2019

Я пытаюсь создать простую навигационную панель с несколькими кликабельными ссылками внутри.Тем не менее, сейчас я не могу щелкнуть содержимое Navbar.У меня такое чувство, что Navbar «блокирует» доступность ссылок внутри, но вкратце, я хочу, чтобы на самом деле можно было щелкать ссылки.Я прикрепил фрагменты моих html и scss ниже.Где я ошибся? 

<nav class="cool-navbar">
        <div class="left-buttons">
            <a class="cool-link">Sammy Al Hashemi</a>
        </div>
        <div class="middle-spacer"></div>
        <div class="right-buttons">
            <a class="cool-link">Projects</a>
            <a class="cool-link">Contact</a>
        </div>
</nav>

.cool-navbar {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: $navbar-height;
  background: inherit;

  .left-buttons {
    width: auto;
  }
  .middle-spacer {
    flex-grow: 1;
  }
  .right-buttons {
    width: auto;
  }

  .left-buttons .cool-link,
  .right-buttons .cool-link {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding: 15px 35px 12px 35px;
    background: inherit;
    font-family: $font-stack;
    text-align: center;
    font-size: $secondary-font-size;
    color: $secondary-color;
    animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
    -webkit-animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
  }
}

.cool-navbar::before {
  content: '';
  position: absolute;
  border-bottom: $secondary-color solid 1px;
  width: 100%;
  height: $navbar-height;
  animation: cool-border-animation 1s ease-in-out 0s 1 both;
  -webkit-animation: cool-border-animation 1s ease-in-out 0s 1 both;
}

Ответы [ 2 ]

1 голос
/ 30 июня 2019

Проблема в том, что <a> tag ссылкам не дана ссылка на гипертекст.Его можно установить с помощью атрибута href следующим образом: <a href="link goes here"> Вы можете установить ссылку на '#' в качестве заполнителя до тех пор, пока у вас не появится ссылка для размещения: 

<nav class="cool-navbar">
    <div class="left-buttons">
        <a href="#" class="cool-link">Sammy Al Hashemi</a>
    </div>
    <div class="middle-spacer"></div>
    <div class="right-buttons">
        <a href="#" class="cool-link">Projects</a>
        <a href="#" class="cool-link">Contact</a>
    </div>
</nav>

Надеюсь, это поможет

0 голосов
/ 07 июля 2019

Разобрался!Это произошло потому, что псевдоэлемент ::before завис над ссылкой, блокируя ее нажатие.Вместо этого я установил top: $navbar-height и удалил height.Это перестало вызывать его блокировать.

...