Skip to main content
OCLC Support

Shorter header height

  1. Last updated
  2. Save as PDF

 Link:  See a live example.

 View:  View source code in CONTENTdm Cookbook Demo Site.

The default header for the CONTENTdm website in desktop/tablet view mode is 150 pixels. In mobile view, the header height reduces to 120 pixels. Some users would prefer that the desktop header occupy less of the screen in desktop mode. This recipe uses custom CSS to compress the overall height of the header. This customization will depend on how large your logo image is and how long your header title is. There are some options in the CSS to account for some of this diversity.

 Note: If you are using the Website Configuration Tool’s Preview function to view this recipe before publishing it, elements of the header may appear misaligned because of the Exit Preview Mode button at the top of the page. This happens only in Preview mode and the alignment should be correct once published and viewed outside of Preview.

This recipe works out of the box with a simple logo + text header. There are several configuration options within the comments of the CSS file. For example, this recipe sets the new header height to 75 pixels, half the default height, but it can be changed to another height if you prefer. You would need to modify some of the pixel values in the CSS if you want a height other than 75px.

Another configuration option for this recipe relates to banner images. If your header depends on a full width banner image, you can alter this recipe’s CSS to account for the banner image size while still shortening the overall header height. Of course, this change will depend on the size (width) of your banner image and could require an alteration to the banner image file to fit the new height properly.

Lastly, this Shorter header height recipe can be used in conjunction with the Scroll away header recipe. The short header recipe’s CSS file contains a section that incorporates the Scroll away header, but it is commented out by default so that it will not be active. If you want your shortened header also to scroll as the page scrolls, you can remove two lines from the CSS file. Both lines that must be removed say “remove this entire line to turn on the Scroll away header.” Also note that the Scroll away header depends on a particular height setting, so if you change your shortened header height from the default of 75px in this recipe you must modify themargin-bottomvalue in thecdm-headerclass accordingly.