CODEWITHSUNDEEP
css
joe
joe

Reputation: 219

Keep position of notification alert no matter content css

I have a menu notification I want it to position absolutely.

PROBLEM If the notification number is +4 for example, the notification shows properly.. But when is +45 or +456 it moves ugly into the center and hides de icon.

How do I keep the notification alert...always at the right of the trophy icon?

.menu{
position:relative;
display:block;
width:32px;
height:35px;
background:red;
text-align:center;
margin:100px;
}

.menu img{
width:16px;
height:16px;
padding-top:10px;
}

.trophy_notification{
	position:absolute;
	top:1px;
	right:-1px;
	background: #45A163;
  font-size:11px;
	padding:2px 3px;
	color:#fff;
	font-weight:bold;
	-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
	text-align:center;
	 
    -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
	z-index:9999;
	
}
<div class="menu"><img src='https://image.flaticon.com/icons/svg/251/251072.svg'/><span class="trophy_notification">+4</span></div>


<div class="menu"><img src='https://image.flaticon.com/icons/svg/251/251072.svg'/><span class="trophy_notification">+45</span></div>



<div class="menu"><img src='https://image.flaticon.com/icons/svg/251/251072.svg'/><span class="trophy_notification">+453</span></div>

Upvotes: 0

Views: 104

Answers (1)

gabrielchl
gabrielchl

Reputation: 606

You may want to change right: -1px into left: calc( 100% - 10px ); As for right, it will set that the numbers should be at most 1px from the right. By using left, it will set that it should start at 10px from the right, no matter how long the number is.

Upvotes: 1

Related Questions