Navigācija ar iconām.

[IFlow]

Labdien!

Saskāros ar problēmu, ka pievienoju navigācija ikonas, un uzbraucot ar pelīti virsu neiekrāsojās visa, vai arī tikai pati apaļā poga, ceru ka kāds palīdzēs.

<nav class="nav">
    <ul>
        <li><a href="#"><i class="fa fa-newspaper-o"></i>Jaunumi</a></li>
        <li><a href="#"><i class="fa fa-user-circle"></i>Par mums</a></li>
        <li><a href="#"><i class="fa fa-calendar-o"></i>Nodarbības</a></li>
        <li><a href="#"><i class="fa fa-sticky-note-o"></i>Raiders</a></li>
        <li class="logo"><img src="app/images/logo.png" alt='logo' width='190px' height='135px'></li>
        <li><a href="#"><i class="fa fa-bomb"></i>Piedavājam</a></li>
        <li><a href="#"><i class="fa fa-shopping-bag"></i>Tērpu noma</a></li>
        <li><a href="#"><i class="fa fa-photo"></i>Galerija</a></li>
        <li><a href="#"><i class="fa fa-phone-square"></i>Kontakti</a></li>
    </ul>
</nav>

.nav ul {
  display: flex;
  width: 100%;
  height: 20%;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  overflow: auto;
}

.nav li { 
	list-style: none; 
} 

.nav i {
  margin-right: 10px;
}

.nav li a { 
  width: 150px; 
  height: 33px; 
  line-height: 33px; 
  text-align: center;
  margin: 15px;
  border-radius: 25px;
  -moz-border-radius: 25px;
  text-decoration: none; 
  display: block;
} 

.nav li a:hover {
  color:#d51c7f;
  transition: 0.3s ease-in-out;
}

 

Edited September 30, 2018 by IFlow

[coofen]

.nav li a:hover {
  color:#d51c7f;
  transition: 0.3s ease-in-out;
} 
//Aizstāj ar 
.nav li:hover a {
  color:#d51c7f;
  transition: 0.3s ease-in-out;
}

.nav li:hover i {
  background-color: #d51c7f
  color: #fff;
}

 

[IFlow]

Paldies Coofen!

Pameiģināšu tavu variantu, bet vakardien kaut kā savadāk izdevās izveidot.

Jauku dienu, IFlow