Mobile Menu Logo - When Menu is Closed
Adding customization to a menu logo can significantly help the user experience for mobile users. Here is how to get this done.
Step 1
Get the Image Address or “URL.”
If viewing an image on a webpage, you can copy it by right-clicking and selecting the “Copy image address” option.
If you do not have the image uploaded, you can always upload it to an Image Component or anywhere else on the internet.
Step 2
Add the following to the JavaScript tab of the Layout where the menu is located.
var imageUrl = '//res.cloudinary.com/tadabase/image/upload/v1592348737/client/tutorials/logo_twohh9.png';
var image = $('<img class="custom-menu-image" src="' + imageUrl + '">');
$('.navbar.navbar-default').prepend(image);
Change the imageUrl to your Image URL
Step 3
Add the following code to the CSS tab of your Layout.
.custom-menu-image {
width: 150px;
position: relative;
margin-right: 15px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
}
@media (max-width: 768px) {
.menu-item-img {
display: none;
}
}
@media (min-width: 768px) {
.custom-menu-image {
display: none;
}
}
Original Community Post:
https://community.tadabase.io/t/mobile-menu-logo-when-the-menu-is-closed/1349