Changing Top Menu in Webhelp Reponsive Output

[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.

[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

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

[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.