Oxygen Primary Menu Colors and Uppercase

• 

  otiumdesignandfineart · Member · Dec 12, 2012 at 6:29 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I am new to WP, and am using the Oxygen theme to set up a site. I need some help with a few things and would appreciate your help in any way!

  1. At the top Primary menu bar- is there a way to give the menu a background color? put the menu in tabs? and change the font color?

  2. Can I change the type in this menu to Uppercase letters?

  Thank you very much for your help.

  The blog I need help with is otiumdesignandfineart.com.

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

• 

  valuearchitecture · Member · Dec 13, 2012 at 7:54 pm

  • Copy link

  I would also like to know how to change the uppercase letters on the menu bar…
  Also check out the website, still a work in progress.

  Welcome

• 

  designsimply · Member · Dec 29, 2012 at 6:46 pm

  • Copy link

  At the top Primary menu bar- is there a way to give the menu a background color?

  Here is an example showing how to change the background color and add padding to the the main menu in the Oxygen theme:

  .main-navigation {
  	background: #f7fd67;
  }
  
  .main-navigation ul {
  	padding: .8em 0 0 1.5em;
  }

  You can pick a different color code and change the padding numbers to adjust how it looks.
  http://0to255.com/

• 

  designsimply · Member · Dec 29, 2012 at 6:53 pm

  • Copy link

  put the menu in tabs?

  For this one, I would recommend searching for a tutorial until you find one you like and then adjusting the CSS selectors until you get the effect you want. I searched and found one possible example:
  http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

  Their example menu uses an ID “#centeredmenu” for the base menu selector, but the Oxygen theme uses a class “.main-navigation” so you can just swap that out to make it work:

  .main-navigation {
     float:left;
     width:100%;
     background:#fff;
     border-bottom:4px solid #000;
     overflow:hidden;
     position:relative;
  }
  .main-navigation ul {
     clear:left;
     float:left;
     list-style:none;
     margin:0;
     padding:0;
     position:relative;
     left:50%;
     text-align:center;
  }
  .main-navigation ul li {
     display:block;
     float:left;
     list-style:none;
     margin:0;
     padding:0;
     position:relative;
     right:50%;
  }
  .main-navigation ul li a {
     display:block;
     margin:0 0 0 1px;
     padding:3px 10px;
     background:#ddd;
     color:#000;
     text-decoration:none;
     line-height:1.3em;
  }
  .main-navigation ul li a:hover {
     background:#369;
     color:#fff;
  }
  .main-navigation ul li a.active,
  .main-navigation ul li a.active:hover {
     color:#fff;
     background:#000;
     font-weight:bold;
  }

  You can also adjust all of the colors and spacing values in the example if you’d like.
  http://0to255.com/

• 

  designsimply · Member · Dec 29, 2012 at 6:55 pm

  • Copy link

  These pieces from the tabs example above adjusts the font colors in the Oxygen menu:

  .main-navigation ul li a {
     color:#000;
  }
  .main-navigation ul li a:hover {
     color:#fff;
  }
  .main-navigation ul li a.active,
  .main-navigation ul li a.active:hover {
     color:#fff;
  }

  You can change out the color codes to adjust it.
  http://0to255.com/

• 

  designsimply · Member · Dec 29, 2012 at 6:59 pm

  • Copy link

  Can I change the type in this menu to Uppercase letters?

  You can use the text-transform CSS property to change fonts to uppercase. See http://www.w3.org/wiki/CSS/Properties/text-transform

  Here is an example of using it for the main menu of the Oxygen theme:

  .main-navigation ul li a {
  	text-transform: uppercase;
  }