Jump to content
php.lv forumi
IFlow

Navigācija ar iconām.

Recommended Posts

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;
}

 

icon_problem.png

icon_solved.png

Edited by IFlow

Share this post


Link to post
Share on other sites
.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;
}

 

Share this post


Link to post
Share on other sites

Paldies Coofen!

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

Jauku dienu, IFlow

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×