Liferay 7 dynamically change a menu's display template

[William Gosse, modificado hace 6 años.]

I want to initially set my nav menu's display template to be "Pills Horizontal". I tried adding the following to my navigation.ftl file:
<#assign VOID = freeMarkerPortletPreferences.setValue("portletSetupPortletDecoratorId", "barebone")>
<#assign VOID = freeMarkerPortletPreferences.setValue("displayStyle", "ddmTemplate_NAV-PILLS-FTL") />

<div aria-expanded="false" class="collapse navbar-collapse" id="navigationCollapse">
<#if has_navigation && is_setup_complete>
<nav class="${nav_css_class} site-navigation" id="navigation" role="navigation">
<div class="navbar-form navbar-right" role="search">
<@liferay.search default_preferences="${freeMarkerPortletPreferences}" />
</div>

<div class="navbar-left">
<@liferay.navigation_menu default_preferences="${freeMarkerPortletPreferences}" />
</div>
</nav>
</#if>
</div>
<#assign VOID = freeMarkerPortletPreferences.reset()>

It didn't seem to work. I had to login a manually set the display template configuration.

Is this possible to do or not?

I also want to dynamically change my nav menu's display template based on on device size.

[William Gosse, modificado hace 6 años.]

I was able to kind of do this with jQuery to change css classes on the fly:

$(window).on('resize', function() {
	if($(window).width() <= 767){
		$('#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet > ul').removeClass('nav-pills');
		$('#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet > ul').addClass('nav-pills-stacked');
	}else{
		$('#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet > ul').removeClass('nav-pills-stacked');
		$('#navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet > ul').addClass('nav-pills');
	}
})