customizing menu fonts

  • I am trying to change the font of a new drop down menu on my blog (www.thehairychef.com – using twenty ten theme), but am not confident with coding.

    The font I have used for the page title is Rock Salt, and I tried adding something along the lines of

    #site-title,
#access .menu,
#access div.menu ul,
h1#page-title{
	Font-family: Rock Salt, serif;
	font-color: #6a6bff;
}

#menu-heading,ol, ul {
	font-size: 16px;
	font-family: Rock Salt, serif;
	font-weight: bold;
	font-color: #6a6bff;
}

    in the style.css file…no luck as of yet.

    I also tried to change my blockquotes to the same font with the following change:

    blockquote {
	font-style: italic;
	font-family: Rock Salt;
	font-size: 20px;
	padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
	font-style: normal;

    but again, nothing changed.

    Can anyone advise one where I am going wrong…or perhaps….how to go right ??

    ta

Viewing 4 replies - 1 through 4 (of 4 total)

  • jampen26,

    When you use two word font names in css you need to wrap them in quotation marks.

    I had to use the !important declaration also to get it to work.

    #menu-heading,ol, ul {
	font-size: 16px;
	font-family: "Rock Salt", serif!important;
	font-weight: bold;
	font-color: #6a6bff;
}
    Thread Starter jampen26

    (@jampen26)

    thanks for your help.

    I tried making this change and it hasn’t had any effect on the font of the links within the drop down menu.

    Any other ideas?

    Thread Starter jampen26

    (@jampen26)

    When I “inspect element” it shows the following

    menu-heading, ol, ul {
font-size: 16px;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-weight: bold;

    Yet when I go to the saved style.css it shows the following:

    menu-heading,ol, ul {
	font-size: 16px;
	font-family: "Rock Salt", serif!important;
	font-weight: bold;
	font-color: #6a6bff;

    This confuses the hell out of me.

    HELP!?!?!?!?

    Thread Starter jampen26

    (@jampen26)

    When I “inspect element” it shows the following

    menu-heading, ol, ul {
font-size: 16px;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-weight: bold;

    Yet when I go to the saved style.css it shows the following:

    menu-heading,ol, ul {
	font-size: 16px;
	font-family: "Rock Salt", serif!important;
	font-weight: bold;
	font-color: #6a6bff;

    This confuses the hell out of me.

    HELP!?!?!?!?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘customizing menu fonts’ is closed to new replies.