I’ve been asked by various users how to do this, so I’ll post some JavaScript and CSS you can use to add an image to the closed state of a mobile menu.
Here’s what the result will look like.
The first thing you’ll need to get is 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 yet, you can always upload it to an Image Component or anywhere else on the internet.
Next, add the following to the JavaScript 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);
Note: Change the imageUrl to your Image URL.
Finally, add the following to the CSS section 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;
}
}