Return to Support

Changing secondary menu items to lowercase

Home Forums Graphene WordPress theme Support Changing secondary menu items to lowercase

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #9707
    brentwz
    Member

    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.

    #44370
    Skivey
    Member

    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;
    }

    #44371

    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;
    }

    #44372
    brentwz
    Member

    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.

    #44373
    Luko
    Member

    In Child-theme try something like this:

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

    #44374
    brentwz
    Member

    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?

    #44375
    Luko
    Member

    Google is your friend ๐Ÿ˜‰

    http://www.yellowjug.com/web-design/the-importance-of-important-in-css/

    http://www.w3.org/TR/CSS2/cascade.html

    http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

    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.

    #44376
    brentwz
    Member

    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.