Oxygen Menu CSS

• 

  richwoodward · Member · Apr 18, 2013 at 4:50 pm

  • Copy link
  • Add topic to favorites

  Two questions about CSS customization with the Oxygen theme. The site I need help with is http://carvingnature.net

  1. Is there any way to change the color of the “/” markers in the primary menu? As you can see, I have added a black background to the primary menu, but this means the “/” markers you normally get with Oxygen are not visible. Can their color be changed to make them visible? If so, how?

  2. Does anyone know how I can increase the white space (padding?) below the primary menu on Oxygen? On the site, I want the white space between the menu and the content below to be the same length as the white space between the menu and the header above.

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

• 

  thesacredpath · Member · Apr 18, 2013 at 5:22 pm

  • Copy link

  1. Yes, it is possible. The “/” is an image inserted as a background element. Create a new image the same size as the existing (or edit this one for color), upload it to your media library, add the following to your custom CSS, get the URL of that image and replace URL OF IMAGE between the double quote marks with that URL.

  Here is the original image: http://s0.wp.com/wp-content/themes/pub/oxygen/images/menu-separator.png .

  .main-navigation li {
  background: url("URL OF IMAGE") no-repeat scroll left 15% transparent;
  }

• 

  thesacredpath · Member · Apr 18, 2013 at 5:25 pm

  • Copy link

  2. Yes, add some bottom margin to the menu. Add the following declaration to .main-navigation in your custom CSS and edit the 40px value as desired.

  margin-bottom: 40px;

• 

  richwoodward · Member · Apr 18, 2013 at 6:06 pm

  • Copy link

  both methods worked perfectly, thanks so much.

• 

  thesacredpath · Member · Apr 18, 2013 at 6:17 pm

  • Copy link

  You are welcome.

• 

  richwoodward · Member · Apr 18, 2013 at 7:54 pm

  • Copy link

  one little follow up: is there any way to change the position of the menu separators (the “/”s)?

  If you see on the new version of the blog, the menu items don’t align perfectly with the separators (the latter could do with begin moved down a few pixels).

• 

  designsimply · Member · Apr 18, 2013 at 8:16 pm

  • Copy link

  The “15%” part of the first example thesacredpath posted controls the vertical position.

  Try updating to something like this:

  transparent url('http://carvingnaturedotnet.files.wordpress.com/2013/04/menu-separator.png?w=8') no-repeat 0 25%;

  Adjust the “25%” value as needed.

  See this for more info. about the “background” shorthand property:
  http://www.w3.org/TR/CSS2/colors.html#propdef-background

• 

  richwoodward · Member · Apr 18, 2013 at 8:30 pm

  • Copy link

  cool, thanks :-)