Jump to content
php.lv forumi

Navigācija ar iconām.


IFlow

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
Link to comment
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...