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

I am kinda confused...I am not too worried about the horizontal menu, but I would like to have the submenus on the navigation bar at the top, or the top menu, that way I can group them a little better and save some space, basically so there isn't a need for the slider at the top... @hpsiorg, thank you for the code, but do you maybe have some instruction on where exactly to put it within the css file, as well a which css file to add it to?

Quote · 17 Feb 2018

2018-03-02 

I am kinda confused...I am not too worried about the horizontal menu, but I would like to have the submenus on the navigation bar at the top, or the top menu, that way I can group them a little better and save some space, basically so there isn't a need for the slider at the top...

To be clear, this CSS doens't create navigation bar submenus. It simply converts the secondary navigation bar drop-down menus to (horizontal) links on the secondary navigation bar.

@hpsiorg, thank you for the code, but do you maybe have some instruction on where exactly to put it within the css file, as well a which css file to add it to?

To reference this CSS:

  1. create a CSS file
  2. add desired CSS
  3. add the CSS file to your Dolphin website file structure, preferably in the following location, with other Dolphin css files:

    /public_html/templates/tmpl_evo/css/mycssfile.css

    where:
    tmpl_evo is the template name and
    mycssfile.css is the name of your CSS file

  4. navigate to the following field in the Administration interface:

    Settings / Basic Settings / Injections / <HEAD> Injections

  5. add following snippet so your CSS file is referenced in all Dolphin web pages:

    <link rel="stylesheet" type="text/css" href="/templates/tmpl_evo/css/mycssfile.css" />

 Hope this helps

Quote · 2 Mar 2018