EVO navigation menu submenus/horizontal submenus?

Given this hot topic about submenus in EVO template, can submenus be enabled on the navigation menu in EVO as they are in the UNI template (see first attached image)?

Instead of / in addition to, can module submenus be displayed horizontally in the module heading, like they were in UNI template (see second attached image)?

 

Quote · 18 Oct 2017

* I am looking for that too 

Quote · 18 Oct 2017

I think it is all handled by CSS but I haven't look.  Therefore, just study the CSS between the two templates.  You can use inspect element to see the CSS for each template but remember you have to have CSS compression turned off in the admin; clear caches if you didn't and turned it off.

Geeks, making the world a better place
Quote · 18 Oct 2017

Oh, also look at the template files for the template, the .html files.  These are not true html files, these files are parsed by the template engine to add in code.  You will see keys __Key-Name__ that are changed to the actual code by the template engine.  Some actual html tags are used as well, such as ul and li tags and these are used just as they would be in a regular html file.

Geeks, making the world a better place
Quote · 18 Oct 2017

CSS to convert submenu from EVO template drop-down to visible horizontal (UNI template style):

/* display and format submenu items */
div.sys_ph_submenu_submenu { position: relative; display: block; float: right; background-color: transparent; border-width: 0; }
/* horizintally align submenu items */ div.subMenu div.sys_ph_submenu_submenu div.act,
div.subMenu div.sys_ph_submenu_submenu div.pas,
div.subMenu div.sys_ph_submenu_submenu div.bullet { float: left; }
/* eliminate padding around submenu items */ .bx-def-padding-sec-topbottom { padding-top: 0px; padding-bottom: 0px; }
/* hide existing submenu and hamburger icon */
div.sys_page_submenu a.sys_page_header_submenu,
div.sys_page_submenu .sys-icon { display: none; }
/* remove icon padding to left align submenu with main menu above it */
div.sys_page_header_divider { padding-right: 0; }
/* reduce submenu font size */ div.sys_ph_submenu_submenu div.act,
div.sys_ph_submenu_submenu div.pas { font-size: 14px; }
Quote · 19 Nov 2017