The first letter wont turn to uppercase on my menu

• 

  lvbroker · Member · Oct 14, 2014 at 1:29 pm

  • Copy link
  • Add topic to favorites

  I have a menu item I have used text-transform: lowercase;
  /* force text to lowercase */
  text-transform: uppercase;
  /* force text to uppercase */
  text-transform: capitalize;
  /* force text to proper case */

  however it just doesnt uppercase the first letter and its either all lowercase or all upper case.

  thanks

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 14, 2014 at 1:49 pm

  • Copy link

  Hi there, capitalize will capitalize each word. lowercase will make all letters lowercase. Using text-transform: none; will follow what you type in for the menu label. Personally I usually always set it to none so that I can control where I use upper case when I write the text.

  I see you have gotten them menu labels capitalized in Opti using the following CSS.

  #nav-primary .nav > li > a, .custom-colors #nav-primary .nav > li > a, #nav-primary .nav > li.current-menu-item > a, #nav-primary .nav > li.current-cat > a, .custom-colors #nav-primary .nav > li.current-menu-item > a, .custom-colors #nav-primary .nav > li.current-cat > a {
      text-transform: capitalize;
  }

  Nice job!

• 

  lvbroker · Member · Oct 14, 2014 at 2:56 pm

  • Copy link

  Hey I have a question

  How do i make a menu item change color when hovered ?

• 

  thesacredpath · Member · Oct 14, 2014 at 3:34 pm

  • Copy link

  To have the background color change from blue to something else when a menu item is hovered, add the following and adjust the color as desired.

  #nav-primary .nav > li > a:hover {
      background: #CC0000 !important;
  }

  If you wish the background to stay the same color, but have the text change color, you can do this instead.

  #nav-primary .nav > li > a:hover {
      color: #CC0000 !important;
  }

• 

  lvbroker · Member · Oct 15, 2014 at 8:24 am

  • Copy link

  Fantastic! thanks a lot

• 

  lvbroker · Member · Oct 15, 2014 at 8:33 am

  • Copy link

  Hey my inspect element for another menu item which is the slider is #lead-story nav a {

  how would i add a hover for this ?

  Thanks

• 

  lvbroker · Member · Oct 15, 2014 at 9:11 am

  • Copy link

  Hey also,

  once my menu is hovered the “Pulse Home”

  is not visible for some reason ?

• 

  hallluke · Member · Oct 15, 2014 at 1:43 pm

  • Copy link

  You’ve set a more specific background colour and using !important in this block of code:

  #nav-primary .nav > li > a,
  .custom-colors #nav-primary .nav > li > a,
  #nav-primary .nav > li.current-menu-item > a,
  #nav-primary .nav > li.current-cat > a,
  .custom-colors #nav-primary .nav > li.current-menu-item > a,
  .custom-colors #nav-primary .nav > li.current-cat > a {
    color:#FFF;
    background-color:#022457!important;
    font-weight:700;
    border-right:1px solid #101314;
    border-left:1px solid #393E40;
    text-transform:capitalize;
  }

  You should be able to fix this just by removing the !important from the background rule.