Everyone appreciates a good looking website, but no matter how fantastic it looks if it's left unchanged for too long your users will go 'blind' to the fantastic offers you have - the site will go stale.
It's important to update your site frequently and has many benefits. Fresh content will keep your customers coming back plus it's a sign that your business is alive and active. An updated site gives users a feeling that it's still in operation and your care about the site and your customers.
With this in mind, lets look at a really neat idea to alert customers to something new on store via navigation 'stand out' tabs.
Take a look at the example below!!
Immediately the user is drawn to 'Hot Offers' because of the bubble floating above the navigation link.
To make this work, we just need to add a little bit of code into Appearance > Theme Options
In the CSS block add:
li.standOut > a {
display: inline-block;/*bug fix*/
position: relative;
text-decoration: none;
} li.standOut > a::after {
content: 'New';
position: absolute;
bottom: 99%;
right:11%;
background: #5bd2ec;
padding: 0px 6px 0px 5px;
color: #fff;
white-space: nowrap;
opacity: 1;
font-size: 12px;
font-weight: bold;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
li.standOut > a::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 8px solid #5bd2ec;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
opacity: 1;
right: 12%;
bottom: 88%;
}
li.standOut > a:hover::after {
bottom: 89%;
}
li.standOut > a:hover::before {
bottom: 78%;
}
li.standOut > a::after {
-webkit-animation: fadeinndnd 1s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeinnd 1s; /* Firefox < 16 */
-ms-animation: fadeinnd 1s; /* Internet Explorer */
-o-animation: fadeinnd 1s; /* Opera < 12.1 */
animation: fadeinnd 1s;
}
li.standOut > a::before {
-webkit-animation: fadeinnd 1.6s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadeinnd 1.6s; /* Firefox < 16 */
-ms-animation: fadeinnd 1.6s; /* Internet Explorer */
-o-animation: fadeinnd 1.6s; /* Opera < 12.1 */
animation: fadeinnd 1.6s;
}
@keyframes fadeinnd {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadeinnd {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinnd {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadeinnd {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadeinnd {
from { opacity: 0; }
to { opacity: 1; }
}
In the footer block add
<script>$( ".menu li a:contains('HOT OFFERS!')" ).eq(0).closest('li').addClass('standOut');</script>
Warning ⚠️ : It's important to make a couple of changes to this code depending on the navigation structure of your site. In the CSS code is the element that controls the word displayed in the bubble above the navigation.
This can be exchanged for any word of your choice!
In the Footer Block Code you'll just need to change this so it matches exactly the name of the navigation menu you want the bubble to appear over.
Pro Tip 👍: Don't over use this bubble on the navigation or it will become less effective. Use it only from time to time to highlight extra special content or offers!