Skip to main content
Participant
May 12, 2021
Answered

How to change the height of the header

  • May 12, 2021
  • 2 replies
  • 391 views

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.

This topic has been closed for replies.
Correct answer Amebr

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.

2 replies

AmebrCommunity ExpertCorrect answer
Community Expert
May 13, 2021

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.

IsaTWAuthor
Participant
May 17, 2021

Thanks so much for your help!

Peter Grainge
Community Expert
Community Expert
May 12, 2021

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

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.