Setting different logos for desktop and mobile devices works the same way for any Joomlashack template based on the Wright framework.
For this example, we'll use the js_wright template.
Step #1.Display the logo through a module
- Go to Extensions > Templates > js_wright > Logo: - Use module with position of logo -
- Create two modules for the position logo, one will contain the logo for desktop and the other module the logo for mobile.
Step #2. Set the module class suffixes
- In the module to display the logo image for the desktop browsers:
- In Advanced > Module Class Suffix, enter: hidden-phone (Important: make sure you left an empty space at the beginning)
- In the module to display the logo image for the mobile devices set the "Module Class Suffix" to the following values:
- hidden-desktop hidden-tablet (Important: make sure you left an empty space at the beginning)