Need help? Check out our Support site, then


Oxygen Primary Menu Colors and Uppercase

  1. otiumdesignandfineart
    Member

    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 otiumdesignandfineart.com.

  2. 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.
    https://valuearchitect.wordpress.com/

  3. 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/

  4. 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/

  5. 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/

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

Topic Closed

This topic has been closed to new replies.

About this Topic