Changing secondary menu items to lowercase

  • brentwz


    How do I change the default style from uppercase to lowercase on the Secondary Menu items?

    I’m not a code person but I can copy/paste the correct code into my child theme’s style.css file if someone will help me with what & where, thanks.



    Im no expert at this, but if its just lowercase you need then theres a simple way to do it…

    When you are creating your menu, you can change the Navigation Label to whatever you want. (Appearance > Menu)

    Other than that you could play with this changing SIZE and FONT to your needs and put it in the Custom CSS part of graphene;

    #secondary-menu > li > a {
    font: SIZEpx FONT;

    Kenneth John Odle


    The theme’s stylesheet is actually changing the text transformation, however.

    This works on my tech blog:

    #header-menu > li, #secondary-menu > li {
    text-transform: none;



    Sorry, Skivey, I should have said I was using Custom WordPress menus. Graphene has a style override that turns the secondary menu items into UPPERCASE, from whatever case I type!

    Looking at Kenneth’s code suggestion, I’ve found what Graphene’s style.css is set at:

    #secondary-menu > li {

    font: normal 11px arial;

    margin: 0 5px;

    text-transform: uppercase;


    I’m using Child Theme Configurator version 1.6.4 plugin to manage any theme files I modify. After copying Kenneth’s code – or my version below:

    #secondary-menu > li {

    font: normal 11px arial;

    margin: 0 5px;

    text-transform: none;


    into the child theme’s style.css & saving it, then refreshing the browser, it’s still UPPERCASE.

    However, pasting the new code into Graphene’s original style.css does work. But then if it’s not kept in the child theme’s version, when updates occur, I’ll have to redo. Hmmm??

    I’m not really sure how code works between child & parent. Am I supposed to copy the ENTIRE CONTENTS of style.css then do individual edits like this to the relevant lines of code in the child version?

    Please clarify.



    In Child-theme try something like this:

    #secondary-menu > li {
    text-transform: none !important;



    Very sorry, everyone. After installing Child Theme Configurator plugin, in my excitement I mistakenly edited the wrong files for 2 separate codes obtained from Datafeedr & you knowledgeable folks at Graphene.

    I had DFR’s search javascript above your menu override code, which stopped the style working. DUH! I’ve now removed Datafeedr’s javascript & put in the header.php file where it’s supposed to go.

    And I’ve placed your code, Luko, into the style.css of the child theme. It works perfectly, thank you muchly. 🙂

    PS I’ve been recommended to use !important before now with other code edits. How does this statement usually work?



    Google is your friend 😉

    FYI don’t use !important statement to often, use it only when you can’t override some declaration in any other way. In this case, you should try without the !important statement first like Ken suggested.



    Gotcha, Luko, I skimmed those articles, esp. 3rd one. Yes, as you say, basically don’t use !important unless desperate & then remember, it’s probably altering some natural order of priority cascading down the code line!

    Without that DFR javascript in the child’s style.css, your working code works nicely & doesn’t need !important now. The secondary menu labels display as typed in Title Case. Easier to read & more room too!

    Again, thanks, mate.

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum