Thread: How to change the font family and size of the top menu? (see screenshot)

I have been wrestling with this issue for awhile and it is the last remaining issue that I would like to address before rolling out the Version 9 upgrade to my site. I am back to working with a totally bone-stock Version 9 install in order to eliminate any issues with my own skin or pre-version 9 code that may be getting in the way. Please see the screenshot below. All I would like to do is pick a different font and font size for the top horizontal menu that is different from the font for the items in the drop down menu. It seems I am able to change font color so that the top level items are white and the items in the list are black, but any attempts to change the font size in the style.css do not work. The ONLY way I have been able to change the font size is to specify it in the #HorizNav class, but that changes it for both the top-level AND the drop-down menu items. Is it possible to change these without having to resort to writing custom code? I would just like to make a couple simple changes to the style.css file and/or the template.master file if possible.

So far I have only been successful in changing the font color of the drop-down menu items. I made the change below as a test and the menu items DID change to red, but any changes to font-size are ignored.

.aspnetMenu_DynamicMenuItemStyle a:active,
.aspnetMenu_DynamicMenuItemStyle a:link,
.aspnetMenu_DynamicMenuItemStyle a:visited
{
font-size: 14pt;
/*color: #000000;*/
color: red;
line-height: 15pt;
padding-left: 4px;
padding-right: 50px;
width: 100%;
text-decoration: none;
}

Thanks

(P.S. Also notice how the stock logo does not display with a bone-stock install either. I had to change the class from #ctl01_logo to #ctl00_logo to get it to work. Did anyone else have this issue?

Hi

Try editing your template's ASP:menu <LevelMenuItemStyles> to something like this:

Code:

<LevelMenuItemStyles>
   <asp:MenuItemStyle CssClass="aspnetMenu_Level1" font-names="Arial" Font-Underline="False" />
   <asp:MenuItemStyle CssClass="aspnetMenu_Level2" font-names="Arial" Font-Underline="False" />
   <asp:MenuItemStyle CssClass="aspnetMenu_Level3" font-names="Tahoma" font-size="15px" forecolor="Blue" Font-Underline="False" />
</LevelMenuItemStyles>

For Some reason the root level and the Category names are considered Level1 and Level2. Level3 are the menu items below the category names.

I had to dig around a bit to find this out as it's not referenced particularly well on the Microsoft website but the best page I found was this which shows all the styling options for the menu class:

http://msdn.microsoft.com/en-us/libr...rols.menu.aspx

If you do change styles in the menu and nothing seems to be changing, run your site using Chrome or Safari and do an 'inspect' on the menu items. On my site, I found I had other CSS definitions in the style sheet that were overriding the menu item styles.

Adam

Thanks for the info on the "inspect element" feature of Chrome, that looks very useful! However, I still can't really see how to determine where the css style is taking effect. For example, I know that if I add the font-size attribute to the HorizNav class that I can see the menu font size change (on all levels), however when I inspect a root level menu item and look through the styles inheritance tree, this is what I see for #horizNav:

(the underlined items are supposed to be strike-through, but couldn't see how to apply strike-through in this editor)

#horizNav
{
font-size: 14px;
line-height: 35px;
text-align: left;
}

I assume the strike-through means the style is NOT picked up from this element, but this is obviously where I made the change and I see it take effect on the screen. How do I interpret this data?

Also, on a root level menu item such as "Home" I see that .aspnetMenu_Level1 class is being picked up (although the font styles are ignored), but if I pick on of the items in the 2nd level, such as a category and inspect that, I do not see .aspnetMenu_Level1 (or Level2) included in the tree at all. This is all quite confusing to me as a novice. Is it just not possible to fix this problem with .css and template.master changes alone? Has anybody found a simple solution to have a larger font for the root menu items and a slightly smaller font for the second level?

I am resisting having to go in and comment out code and recompile in order to accomplish this task, as I saw in another thread, but it's starting to look like that may be the only solution.

i

I'll try and explain how to interpret the Chrome 'inspect' results but it's going to be difficult in a forum post...

You are right in that when inspecting an element, you see a style in strike-through, then that style is not being used with the on-screen element. There will be another style somewhere that overrides it.

In the inspect panel, you'll see a 'Computed style' block at the very top - this tells you the styles that the on-page item is using.

Below this are the all of the CSS styles used by the element. If you see an item in strike through (e.g 'padding-left: 0px'), look further to the top of the inspect list for where that same style appears normally (you might have to expand some of the collapsed CSS names to find it).

I've included a pic with a simple example.

Having said all that though, using the 'font-names' setting within your template master's asp:menu element is the easiest way to set a specific font at each menu level.

Could you figure out how to style the top menu. I'm also having same issue. If you notice the text of each menu item it seems to be right aligned except for "home". I want to align all of them in center just like "home". But all other items are created dynamically so the style is being overwritten some where in the code. I would like the Staff to jump in an address the issue.

Anyone make any break thru's on this issue?

I'm in the exact same boat -- the logo didn't display on my bone-stock install either. I overcame that, but now am battling just trying to change the style of the horizontal navigation.

I'm not squeemish about making new styles in the style sheet, but since these menus are dynamically generated, and rendered on the client, I'm having a wicked time figuring out what's controlling their style.

Has anyone been able to change the font size without changing the code? I too am having trouble changing this. I can change any other style but the size of the font.

Any updates on these 2 issues?

I added the font size to .aspnetMenu_Level1 and .aspnetMenu_Level2 with !important after it. .... font-size:12pt !important; .....