Different logos for desktop and mobile

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

  1. Go to Extensions > Templates > js_wright > Logo: - Use module with position of logo -
  2. 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)