Page 1 of 1
Changing Top Menu in Webhelp Reponsive Output
Posted: Tue Sep 05, 2017 9:06 pm
by dgallo
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.
Re: Changing Top Menu in Webhelp Reponsive Output
Posted: Thu Sep 07, 2017 12:17 pm
by alin
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
Re: Changing Top Menu in Webhelp Reponsive Output
Posted: Mon May 21, 2018 2:30 am
by asher
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?
Re: Changing Top Menu in Webhelp Reponsive Output
Posted: Tue May 22, 2018 7:08 pm
by asher
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.