Customize the logo

[daryl]

Hi,

I would like to customize the header nav area and move the logo so that the logo and navbar aren't on the same line. How can I do that? Which fragment can I edit to achieve this?

Should I edit this area in the page template?

Code: Select all

<whc:include_html href="${args.hdr}">
            <!-- @Deprecated: use webhelp.fragment.before.body -->
            <!-- EXM-36950 - Expand the args.hdr parameter here -->
        </whc:include_html>

Or is it better to do it in CSS?

Also, what does {args.hdr} refer to?

Thanks!

[alin]

Hello,

You could achieve this by customizing the HTML Page Layout files, but we do not recommend this approach. A complete explanation is available in our User Guide (see the Warning note): https://www.oxygenxml.com/doc/versions/ ... lates.html

The easiest way to display the logo above the menu is by using a custom CSS. For example using the following CSS sample you can move the Logo and the Publication title on separate line above the menu:

Code: Select all

.wh_header_flex_container {
    flex-direction: column;
}
.wh_header_flex_container > * {
    width: 100%;
}
@media only screen and (min-width : 768px) {
    .wh_top_menu_and_indexterms_link.navbar-collapse {
        display: flex !important;
    }
}

.wh_logo_and_publication_title_container {
    display: flex;
    justify-content: flex-start;
}

.wh_logo, .wh_publication_title {
    padding-right: 10px;
}

Here is how the output would look like:


The complete Publishing Template sample is available here: https://github.com/oxygenxml/oxygen-pub ... above-menu

However, if you want only the Logo component to be displayed on a separate line, leaving the title on the same line with the Menu component you need to use a custom XSLT Extension file.
Using XSLT you can customize the HTML structure of the Header section of each output page by changing the location where the Logo component is generated.
We have a similar Publishing Template sample that moves the logo component before the search input. You can use the XSLT customization available in this template as a starting point.

{args.hdr} represents a placeholder for the parameter with the same name: https://www.dita-ot.org/dev/parameters/ ... __args.hdr

Regards,
Alin