Changing Top Menu in Webhelp Reponsive Output

dgallo
Posts: 86
Joined: Tue Mar 31, 2015 10:43 pm

Changing Top Menu in Webhelp Reponsive Output

Post by dgallo » Tue Sep 05, 2017 9:06 pm

In Oxygen 19, Responsive Webhelp, it it possible to change the ul in .wh_top_menu to be the button that appears when you minimize the screen to mobile size? Therefore instead of the words, I want the button that has three dashes.

alin
Site Admin
Posts: 136
Joined: Thu Dec 24, 2009 11:21 am

Re: Changing Top Menu in Webhelp Reponsive Output

Post by alin » Thu Sep 07, 2017 12:17 pm

Hello,

You can provide your own custom CSS that overrides the default styles for the WebHelp Responsive menu and menu toggle button. Unfortunately, this is not a very easy task because there are many CSS rules that need to be overridden.

You can use the following CSS code as starting point:

Code: Select all


@media only screen and (min-width : 768px){
.wh_header_flex_container {
flex-direction: column;
align-items: stretch;
}

.wh_logo_and_publication_title_container {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
flex-wrap: wrap;
align-self: stretch;
width: 100%;
}

.wh_indexterms_link a:before {
padding-left: .5em !important;
}

.wh_toggle_button {
display: inline-block !important;
float: none;
line-height: 1em;
margin: 10px 0;
}


.wh_top_menu ul ul{
display: none;
}

.wh_top_menu ul li.active > ul {
display: block;
padding-left: .5em;
}

.wh_top_menu ul li a {
display: block;
padding: .5em;
text-decoration: none;
}

.wh_top_menu_and_indexterms_link.navbar-collapse {
float: none;
display: none !important;
vertical-align: middle;
}

.wh_top_menu_and_indexterms_link.navbar-collapse.in {
display: block !important;
}

.wh_top_menu {
display: block;
}

.wh_top_menu ul {
position: static;
display: block;
z-index: 999;
margin-bottom: 0;
text-align: left;
}

.wh_top_menu > ul > li {
display: list-item;
}

.wh_indexterms_link {
text-align: left;
display: block;
}

.wh_indexterms_link a:before {
display: block;
margin: 0;
padding: 0;
}
}
Follow this procedure to contribute your custom CSS file to the WebHelp Responsive transformation scenario: https://www.oxygenxml.com/doc/versions/ ... n-css.html

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com

asher
Posts: 7
Joined: Tue May 08, 2018 7:53 pm

Re: Changing Top Menu in Webhelp Reponsive Output

Post by asher » Mon May 21, 2018 2:30 am

I am using this technique to create a two-level menu that uses flexbox to display the items.

If, for example, there are six (6) top level menu items, they typically display as two rows of three items. As I hover over the top level items, the sub menus under each item expand, filling the space in the menu box.

The problem is that I can only expand the sub menus by hovering over the top level menu items.

Is there a way to have the sub menus expand by default under each top level item when the menu icon is clicked?

asher
Posts: 7
Joined: Tue May 08, 2018 7:53 pm

Re: Changing Top Menu in Webhelp Reponsive Output

Post by asher » Tue May 22, 2018 7:08 pm

I can see now that the submenus are loaded at runtime by a JQuery call. Is this correct?

Still, it would be a nice feature to be able to expand the sub-menus automatically by default. When presented in a large flexbox, this creates a functional and very modern looking menu.

Post Reply