I’m aiming to have a minimalist navigation on this site:
But considering some of our stakeholders’ needs, they will appreciate some guidance to know that clicking the icon will take them to the home page.
Is there a simple way to add a tooltip to the main logo image?
Thanks.
Hey AJDesignCo,
Do you want a simple title popup? This may be possible to add via JavaScript.
Best regards,
Jordan Shannon
Yes, a simple title popup is all that’s needed. Do you have any resources on adding that behavior with JavaScript?
Hi,
If you can provide admin info in the private area below I can try to work it out for you.
Best regards,
Jordan Shannon
Awesome. Thank you.
Hi,
Thank you for the credentials, that’s a nice looking header :)
To create a tooltip on the logo
1. I have added this CSS in Enfold > General Styling > Quick CSS
/* Logo title pop */
.logo,
.logo a {
overflow: visible!important;
}
.logo .subtext h1 {
position: absolute;
display: none;
font-size: 14px !important;
background: #222;
color: #fff;
top: 90px;
padding: 10px;
width: 160px;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
.logo a:hover .subtext h1 {
display: block!important;
transition: all .35s ease;
}
2. The below code in WP > Appearance > Editor > Enfold Child > functions.php
add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
$sub .= '<h1>Savannah Lakes Village</h1>';
return $sub;
}
You can change the logo tooltip text from the functions.php file.
Best regards,
Vinay
So sorry for the slow feedback…thank you so much for this excellent solution! I may tweak it a bit, but this is a great start. Thanks again!
Hi,
I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon