How to change header menu font & size?

[Mark Wilsdorf]

Using the Minimalist_Blue_Diamond.hmskin...

I'd like the drop-down menu in the header area to be larger, and maybe a different font, something like in the HM7-Help-Webhelp-Responsive.hmskin:

menu..png

Where can/may/should I do this (yes, I'm .CSS and HTML capable)?

Thanks.

[Tim Green]

Hi Mark,

It's part of the design of the version three responsive skins that the menu bar is relatively small. You won't be able to make it as large as the standard skins included with Help & Manual, because that's a completely different layout and design. If that is the design you want, I would suggest using one of those skins.

That being said, you can adjust the size of the font in the CSS files. Note that there are three versions of each CSS file. One each for desktop, tablet and phone modes. This makes it possible to adjust the font differently for each device type. The font size settings are in the main CSS file of each type:

hmwehelp_main_desktop.css
hmwehelp_main_tablet.css
hmwehelp_main_phone.css

The font size setting is in the very first rule for this section to make it immediately accessible:

Code: Select all

/* Drop-down menus in page header */

div#header_menu {
	overflow: auto;
	background-color: #aeaeae;
	overflow: visible;
	font-size: 0.750rem;
	z-index: 1001;
	}

Change the font-size: x.xxxrem; setting to adjust the size of the text in the entire menu. Only use rem as units, do not use any other units! If you do, the responsive adjustment will not work correctly.

[Mark Wilsdorf]

Thanks Tim, I'll play with it a bit.