Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How to change the height of the header

New Here ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

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.

TOPICS
Classic, Output presets

Views

101

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , May 12, 2021 May 12, 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. Rig...

Likes

Translate

Translate
Adobe Community Professional ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 12, 2021 May 12, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 16, 2021 May 16, 2021

Copy link to clipboard

Copied

LATEST

Thanks so much for your help!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp