WordPress.org

Ready to get started?Download WordPress

Forums

customizing menu fonts (5 posts)

  1. jampen26
    Member
    Posted 2 years ago #

    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

  2. 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;
    }
  3. jampen26
    Member
    Posted 2 years ago #

    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?

  4. jampen26
    Member
    Posted 2 years ago #

    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!?!?!?!?

  5. jampen26
    Member
    Posted 2 years ago #

    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!?!?!?!?

Topic Closed

This topic has been closed to new replies.

About this Topic