Add an emoji alert

Add this the navigation menu label:

Reviews<span class="hws-alert">🎄</span>Code language: HTML, XML (xml)

And add this to the custom css

/* -- START alert in menu -- */
.hws-alert {
position: relative;
top: -13px;
right: 2px;
margin-left: -5px;
font-size: 1.2em;
text-align: center;
}
/* -- END alert in menu-- */Code language: CSS (css)

Add a red numbered dot

Add this the navigation menu label:

Reviews<span class="hws-reviews">22</span>Code language: HTML, XML (xml)

And add this to the custom css

/* -- START red alert dot menu -- */
.hws-reviews {
position: relative;
top: -13px;
right: 2px;
padding: 3px;
background-color: #E7180E;
border-radius: 50%;
font-size: 75%;
text-align: center;
color: #fff;
}
.hws-reviews-padding{
padding-right:5px !important;
}
/* -- END red alert dot menu-- */Code language: CSS (css)

Notes:

• The original css has a position:absolute, but that’s difficulat to
• make responsive as it is positioned on a fix place regardless screen size 9so you need to set for each screen).
• Disadvantage of position:relative is that the gap between menu items is after the dot alert (so more space between the actual menu text). To fix this, add hws-reviews-padding to the menu item class.