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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...