Logo disappears in HTML output upon window resizing

[tanja]

Hello,

I am using Oxygen XML version 26 to create HTML WebHelp output.
In the output, when I scale the window down to a width of 575 pixels or less, the logo in the left corner disappears. In the HTML source of the output, the link to the logo uses the CSS class "wh_logo d-none d-sm-block" where "none" seems to be the culprit. But I have no idea where this setting comes from and how I can remove it. In the publication parameters of the opt file, there is nothing related to it.
Could you please advise how to solve this issue?

Thanks and best regards, Tanja

[xephon]

Hello Tanja,
Please have a look at the original CSS file of your publishing template. You are very close to the solution.
There should be a wrapping CSS media query, which triggers the appearance of the logo. See https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[InspectorSpacetime]

Hi Tanja,

You could also try:

Code: Select all

.wh_logo {
	display: block !important;
}

in your custom CSS.

The d-none is a Bootstrap display class that hides the element. The d-sm-block, however, overrides this and shows the element when the screen size is larger than the small breakpoint (576px).

[tanja]

Hi all,

Thanks for the input everyone

Code: Select all

.wh_logo {
	display: block !important;
}

Did the trick for us.

Best regards, Tanja