Changing Top Menu in Webhelp Reponsive Output

dgallo
Posts: 82

Changing Top Menu in Webhelp Reponsive Output

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: 126

Re: Changing Top Menu in Webhelp Reponsive Output

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

Re: Changing Top Menu in Webhelp Reponsive Output

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

Re: Changing Top Menu in Webhelp Reponsive Output

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.

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest