Primary navigation

• 

  olalaboutique · Member · Oct 25, 2011 at 4:16 pm

  • Copy link
  • Add topic to favorites

  Hi, my blog is olalaboutique.com and I´m using Coraline theme.

  I have a menu as my primary navigation, below the logo, and I want to change its background color to grey (its currently white). Also I don´t want to use only upper case letters.

  Can you help me?

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

• 

  thesacredpath · Member · Oct 25, 2011 at 5:48 pm

  • Copy link

  Menu background color:

  #access {
  background-color: #CCCCCC;
  }

  Menu text change. Note I included font-weight as well since changing to normal font weight (text-transform: none;) made the text difficult to read with font weight set at “bold”. Font weight can be anything between 400 (normal) and 800 (bold).

  #access ul {
  font-weight: 500;
  text-transform: none;
  }`

• 

  thesacredpath · Member · Oct 25, 2011 at 5:48 pm

  • Copy link

  Gaah, haven’t had my coffee and missed an opening code tag.

  #access ul {
  font-weight: 500;
  text-transform: none;
  }

• 

  olalaboutique · Member · Oct 26, 2011 at 11:25 pm

  • Copy link

  Thanks. It worked.

  There is a way to justify the menu? So the last word be at the end of the line.

  And also, what is the code to change the background color of the menu when selected?

• 

  thesacredpath · Member · Oct 27, 2011 at 7:13 am

  • Copy link

  These are the selectors that have to do with the background colors and font colors for the menu items. I think this is all of them and you will have to just play with them to figure out what is what exactly.

  #access li:hover > a, #access ul ul:hover > a {
  background: none repeat scroll 0 0 #000000;
  color: #FFFFFF;
  }
  #access ul ul a:hover {
  background: none repeat scroll 0 0 #222222;
  }
  
  #access .current-menu-item a, #access .current-menu-ancestor a, #access .current_page_item a, #access .current_page_ancestor a {
  background: none repeat scroll 0 0 #000000;
  color: #FFFFFF;
  }

  On this theme, I’ve never figured out how to center the menu properly. You can use left padding to move everything over, but then if you add or change something you have to go back in and adjust the padding. Also, each browser renders differently which means it might not be centered in all browsers. And another thing, it all depends on the settings people have made in their browser or if they have a zoom level set.

• 

  olalaboutique · Member · Oct 27, 2011 at 9:58 pm

  • Copy link

  Only the first one worked. I changed the text color to blue. I want to change the background color too, but it doesnt seem to work.

• 

  thesacredpath · Member · Oct 27, 2011 at 10:12 pm

  • Copy link

  You need to edit the background colors set in the background declaration. In your CSS, they are set as the exact same colors as I listed above, which are the original colors. BUT, the theme is being difficult so add the “!important” attribute to the end of each background declaration as below.

  background: none repeat scroll 0 0 #000000 !important;

• 

  olalaboutique · Member · Oct 27, 2011 at 10:27 pm

  • Copy link

  I´m not sure if I did it okey, I type it like this, and the background color its still black.

  #access li:hover > a,#access ul ul:hover > a {
background:none repeat scroll 0 0 #000000!important;
color:red;
}

  #access ul ul a:hover {
  background:none repeat scroll 0 0 #222222!important;
  color:blue;
  }

  #access .current-menu-item a,#access .current-menu-ancestor a,#access .current_page_item a,#access .current_page_ancestor a {
  background:none repeat scroll 0 0 #000000!important;
  color:green;
  }

• 

  thesacredpath · Member · Oct 27, 2011 at 10:42 pm

  • Copy link

  “COLOR” is font color. In the background line, see the #000000 or #222222 at the end of it before the !important? That is the background color for the menu items. You have to edit or change that color code.

• 

  olalaboutique · Member · Oct 27, 2011 at 11:00 pm

  • Copy link

  Ok, I was missing that. It worked.

  I only need to change the background color of the unselected drop down list, which is black now. Can it be done?

• 

  thesacredpath · Member · Oct 27, 2011 at 11:11 pm

  • Copy link

  I missed that one.

  #access ul ul a {
  background: none repeat scroll 0 0 #888888 !important;
  }

• 

  olalaboutique · Member · Oct 27, 2011 at 11:32 pm

  • Copy link

  It worked, if I ever get married I will invite you as the best man.

• 

  thesacredpath · Member · Oct 28, 2011 at 3:03 am

  • Copy link

  You are welcome. :-)