How to change the height of the header

[IsaTW]

Hi All,

I'm using RH 2019 Classic, and trying to generate Responsive HTML5 output with the default Azure Blue layout. 

Can anyone tell me how to change the header default height and font size?

I can't seem to find those settings in the layout customization window.

The header does not show up on "phones", which is fine, but when it does appear on desktops and tablets, I would like it to be somewhat smaller.  

Thanks in advance.

[Peter Grainge]

I don't recall how but something is telling me that was covered in a post. Maybe for RoboHelp 2017 but the method would be the same.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[Amebr · Accepted solution]

Open the layout.css in an external text editor and search for div.header.  You'll need to change at minimum 'body.media-desktop div.header' but possibly other div.media-xxxx styles as well, depending on your needs. Resize your browser to match various device sizes to see how it will display.

You will probably also need to adjust other elements that appear within the header for each device size as well.

The browser developer tools are your friend when trying to find what styles to modify. Right-click on an element, then select "Inspect" to get close the the element you want adjust and check the styles in the right-panel. you might need to click up or down through the code to find the specific style you need though.

If you have a friendly web developer, they should be able to help more quickly, with a copy of the css and the output.

[IsaTW]

Thanks so much for your help!