Навигация и текст для элемента li - PullRequest
Новая
       21

Навигация и текст для элемента li

0 голосов
/ 23 февраля 2019

В настоящее время я пытаюсь создать панель навигации, где у меня есть изображение среднего размера поверх тега

с текстом внизу (аналогично трюкам css).Я пробовал background-image, а также img внутри самого тега li, но до сих пор не радуюсь.

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

Если у вас есть дополнительные вопросы, я буду рад помочь. 

nav#navBar img {
    height: 80px;
    margin-left: 80px;
}

nav#navBar {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 25px 0 black;
    font-family: 'Nunito Sans', sans-serif;
    font-variant: small-caps;
    font-weight: 600;
  }

nav#navBar * {
    display: inline;
    padding: 15px;
}

nav#navBar li {padding: 30px;}
nav#navBar li.blue:hover {border-bottom: 2px solid #33A1DE;}
nav#navBar li.red:hover {border-bottom: 2px solid #CC3232;}
nav#navBar li.green:hover {border-bottom: 2px solid #28AE7B;}
nav#navBar li.purple:hover {border-bottom: 2px solid #7A378B;}

nav#navBar li a {
    color: black;
    text-decoration: none;
}
  <nav id="navBar">
    <img src="#">
    <ul>
      <li class="green"><a href="#home">ARTICLES</a></li>
      <li class="blue"><a href="#">SNIPPETS</a></li>
      <li class="red"><a href="#">MEMBERS</a></li>
      <li class="purple"><a href="#">CONTACT</a></li>
    </ul>
  </nav>

1 Ответ

0 голосов
/ 23 февраля 2019

Вы должны поместить фоновое изображение в тег li и использовать отступы для проталкивания текста вниз. 

nav#navBar li.green {background:url(image.jpg) no-repeat; padding-top: 30px;}
...