ripplelink menue icons with numbers

Locked
hinneLinks
Posts: 8
Joined: 05 Aug 2015, 09:07

26 Oct 2015, 11:27

I'm trying to combine the "ripplelink" menue from the Showcase with a numbered icon, like in the shopping cart.
It works, but it seems the round background of the menue is cutting off the number:
Image

This is my Code:

Code: Select all

<ul id="top-menu">
	<li>
		<a class="ripplelink">
			<i class="icon-head">
				<span class="CartText White">12</span>
			</i>
			<span class="ShowOnMobile">User Settings</span>
		</a> 
	</li>
</ul>
I tried a couple things with div's, z-index etc. but none work as expected.
Do you Guys have a idea?
Enviroment: primefaces-5.3 | javax.faces-2.2.12 (Mojarra) | modena-theme-2.0 | WebSphere 8.5.5.6

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

26 Oct 2015, 14:35

Please try with;

topbar.xhtml

Code: Select all

<ul id="top-menu">
    <li>
       <a class="ripplelink Test">
          <i class="icon-head"><span class="CartText White">12</span></i>
         <span class="ShowOnMobile">User Settings</span>
      </a>
   </li>
</ul>
CSS

Code: Select all

.Test.ripplelink {
   width: 52px !important;
}
.Test.ripplelink .CartText {
   position: relative;
   top: -12px;
}

hinneLinks
Posts: 8
Joined: 05 Aug 2015, 09:07

26 Oct 2015, 15:40

That works, thanks for the quick response!
Enviroment: primefaces-5.3 | javax.faces-2.2.12 (Mojarra) | modena-theme-2.0 | WebSphere 8.5.5.6

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

26 Oct 2015, 15:59

Glad to hear, thanks ;)

Locked

Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest