Меню навигации Эффект наведения и Активный эффект (Пользовательский CSS в Elementor / Wordpress) - PullRequest
Новая
       36

Меню навигации Эффект наведения и Активный эффект (Пользовательский CSS в Elementor / Wordpress)

0 голосов
/ 12 июля 2020

Я абсолютный новичок, когда дело доходит до кода (поэтому я использую elementor для создания своего сайта)

Я пытаюсь стилизовать меню навигации с помощью пользовательского css, поскольку предоставленный решения выглядят немного некрасиво.

До сих пор мне удавалось создать и «подчеркнуть» эффект наведения, который мне нравится использовать CSS Hero.

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

До сих пор мне удавалось выделить подчеркивание в активном меню, но анимация наведения продолжает отображаться вверху.

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

.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: ##212121;
  height: 1px;
  transition-property: left, right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:hover:before,
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:focus:before,
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:active:before {
  right: 0;
  left: 0;
}

.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item.elementor-item-active{
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #212121;}
...