EVO navigation menu submenus/horizontal submenus?

208 posts

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)?

dolphin_734_submenu_reposition_20171017.jpg · 447.5K · 348 views

dolphin_734_submenu_horizontal_20171017.jpg · 474.9K · 316 views

Quote · 18 Oct 2017

karl29Premium

202 posts

* I am looking for that too

Quote · 18 Oct 2017

geek_girlPremium

11493 posts

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

geek_girlPremium

11493 posts

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

hpsiorgAdvanced

208 posts

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

RyanJamesAdvanced

23 posts

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

hpsiorgAdvanced

208 posts

2018-03-02

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:

create a CSS file
add desired CSS
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
navigate to the following field in the Administration interface:

Settings / Basic Settings / Injections / <HEAD> Injections
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

Reply ›

EVO navigation menu submenus/horizontal submenus?

Blogs

Help

Product

Company