KB320099: How to Customize the Logo Button to move the Dropdown Effect Menu of the Small Arrow to the logo itself, with the MicroStrategy Web SDK

SUMMARY:
The default behaviour when hovering on the Strategy web logo is that a small arrow comes out, and by clicking on this arrow the main drop down menu is displayed:

 
This technical note demonstrates how the arrow can be removed, and conflicting onClick functionality can be removed to the overall logo using the Strategy Web SDK. This customization is a 2-part customization involving CSS to hide the arrow and javascript to disable the refresh functionality that is tied to the logo.
 
ACTION:
Disabling the arrow that appears when hovering or opening the menu:
In order to disable the arrow, the CSS that adds the arrow to that part of the page can be disabled using custom CSS. There are two properties that affect this, one for when the menu is closed, and one for when it's open (with a red background). These are the CSS selectors and the properties that allow to simply remove the arrow, but not the section itself:

.opened .mstrLogoMenu {
	background-image: 		none !important;
}
#mstrLogoMenu {
	background: 		none !important;
	pointer-events: 		none !important;
	cursor: 		default !important;
}

1. Launch the Strategy Web Customization Editor.
2. Create a new plugin and give it a meaningful name.
3. Navigate to Strategy Web Configuration->Global CSS->Customizations->global.css.
4. Right-click on global.css and select New Selector.
5. Paste the first CSS selector into the box ".opened .mstrLogoMenu".
6. Right-click the newly added selector and choose "New Property".
7. For the property, use "background-image" as shown above.
8. For the value, use "none !important" as shown above.
9. Repeat steps 4-8 for the CSS selector ".mstrLogoMenu", using the property "background" and the value "none !important".

After following these steps, restarting Strategy Web and clearing browser caches, the arrow is now permanently hidden.
 
Moving the onClick logic from the arrow to the logo:
On clicking on this menu, the page simply refreshes.  This is because there is another div that has on-click functionality which triggers a redirect. This next part explains how to override that on-click functionality using javascript, copying the click action from the currently hidden arrow:

1. Navigate to the location where Strategy Web is installed on the file system.
2. Inside the Strategy Web folder, locate the plugins folder.
3. Locate the folder within the plugins folder, created previously when applying the CSS part of this customization.
4. Navigate into this plugin folder and create a new folder called "javascript".
5. Navigate into the newly created "javascript" folder within the plugin and create a file called "global.js". 
6. Edit this file and add the following javascript:
   

   
   function dropDownStarburst() {
   	document.onreadystatechange = function() {
   		if (document.readyState=="complete") {
   			// copy the click action from the arrow to the logo
   			var mstrStarburst = document.getElementById("mstrStarburst");
   
   			// Optional: the mstrLogoMenu element was hidden using CSS. To completely remove it from the DOM the following call can be used:
   			mstrStarburst.removeChild(mstrStarburst.lastElementChild);
   
   			// disable the conflicting redirect click action
   			mstrStarburst.href = '#';
   			mstrStarburst.setAttribute("onclick","return false");
   			// Adding an event listen for when user clicks on the logo to open the shortcut list drop down
   			mstrStarburst.addEventListener("click",function(){ 
   				Strategy.showShortcutsList();
   			});
   
   		}
   	};
   };
   
   dropDownStarburst();

   
   
7. Save all changes, restart Strategy Web and clear browser caches for the changes to register.

 
If these steps have been followed correctly, the arrow should no longer appear and the logo will instead trigger the menu on all pages in Strategy Web. 

 
ADDITIONAL INFORMATION:
The Strategy SDK allows you to customize several Strategy products and extend and integrate the Strategy business intelligence functionality into other applications. However, before changing the way Strategy products look or behave, it is helpful to understand how the application is built. For more information regarding the Strategy products or the process of customizing Strategy products, please refer to Strategy Developer Zone (https://developer.Strategy.com).
To access the Strategy Developer Zone, you must have access to the Strategy Knowledge Base, you must have purchased the Strategy SDK, and you must be current on your Strategy maintenance agreement. If you are a US-based business and believe that you satisfy all three of these conditions but you do not have access to the Strategy Developer Zone, please contact Strategy Technical Support at support@Strategy.com or at (703) 848-8700. If you are an international business, please contact Strategy Technical Support at the appropriate email address or phone number found at https://www.Strategy.com/us/services/support/contact.
CUSTOMIZATION WARNING:
This customization is provided as a convenience to Strategy users and is only directly applicable to the version stated. While this code may apply to other releases directly, Strategy Technical Support makes no guarantees that the code provided will apply to any future or previous builds. In the event of a code change in future builds, Strategy Technical Support makes no guarantee that an updated version of this particular customization will be provided. In the event of a code change in future builds, Strategy may not be able to provide additional code on this matter even though this customization is provided at this time for this specific build. For enhancements to this customization or to incorporate similar functionality into other versions, contact your Account Executive to inquire about Strategy Consulting assistance.
000020058