#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    4
    Rep Power
    0

    How do I edit the menu font?


    Hey, I'd like to make the font of my menu a little bit more bold. It's pretty narrow now. I'm pretty new to php and css but I posess a basic understanding of how it works. Where in the code do I edit this part and what would it look like?

    Here's an excerpt from the css Im using a wp-theme called ultra if that for some reason helps. Thanks for your patience!

    The css:
    /************************************************************************************
    Menu Wrap
    ************************************************************************************/
    #primary-menu{margin:0 20px; min-height:3em; font-size:12px; position:relative; z-index:99; border-bottom:1px solid #CCC; border-top:1px solid #CCC}

    /************************************************************************************
    Important Menu Styles | Best To Only Edit Paddings
    ************************************************************************************//
    .sf-menu{float:left}
    .sf-menu a{padding:1em; text-decoration:none}
    .sf-menu a:hover{text-decoration:none}
    .sf-menu a, .sf-menu a:visited{/* visited pseudo selector so IE6 applies text colour*/color:#666}
    .sf-with-ul a,
    .sf-menu li a:hover{background:#EEE;text-shadow:1px 1px 1px #FFF;}
    .sf-menu li li a{padding:0.8em 1em}
    .sf-menu li{background:#FFF}
    .sf-menu li li{border-left:1px solid #CCC; border-right:1px solid #CCC; border-top:1px solid #CCC}
    .sf-menu li ul{border-bottom:1px solid #CCC}
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{outline:0}

    /************************************************************************************
    Essential Menu Styles | DO NOT EDIT
    ************************************************************************************/
    .sf-menu, .sf-menu *{margin:0; padding:0; list-style:none}
    .sf-menu{line-height:1.0}
    .sf-menu ul{position:absolute; top:-999em; width:15em}
    .sf-menu ul li{width:100%}
    .sf-menu li:hover{visibility:inherit}
    .sf-menu li{float:left; position:relative}
    .sf-menu a{display:block; position:relative; text-decoration:none !important}
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul{left:0; top:3em; z-index:99}
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul{top:-999em}
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul{left:15em; top:0}
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul{top:-999em}
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul{left:15em; top:0}
    Last edited by simich_86; February 14th, 2013 at 01:56 PM. Reason: spelling
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    Hello simich_86.

    From the code you've posted, it would be very difficult for us to infer which particular style is being applied to your menu fonts.

    The best way to find this out would be to inspect the HTML for your theme, and take note of the ID which contains your menu.

    I'll hazard a guess and say that #primary-menu seems like the most likely culprit. Before you edit the CSS, though, keep in mind that most WordPress themes have two stylesheets: the default one that comes with the theme, and another one specifically for user-defined styles which overrides the default.

    If your theme has this built in, you should definitely make all modifications in the user-defined stylesheet. Your theme should have documentation outlining which file this is, so refer to it for more specific information.

    To make things a bit bolder, then:
    css Code:
    #primary-menu { font-weight: bold; }


    - Null

IMN logo majestic logo threadwatch logo seochat tools logo