News Pro Secondary Menu

[redfive]

Hello,
I love the News Pro theme, but is there a way to have different css styles for the primary and secondary menu nav?

For example on this website: http://www.gldtest.com/

I'd like to have the top navigation maroon/red with white text with a smaller height. And the Navigation under the logo would remain as is.

I looked in the css file and I only see: .genesis-nav-menu is there a way to setup a .secondary-nav-menu or something?

Thanks for your help in advance.

http://www.gldtest.com/

[eamonmoriarty]

This should change your background color:

.menu.genesis-nav-menu.menu-secondary {
    background-color: #630005;
}

---

Eamon Moriarty
EM Dzine

[redfive]

Perfect! That helped me out tremendously. Now my next question, how do I get my header logo to align to the left instead of centered? I made my logo wider from the original 260 x 90 to 520 x 120, and I made the size change in the functions.php file as well. Below is my code changes.

Functions.php:

//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 120,
'width' => 520,
) );

Style.css:

/* Title Area
--------------------------------------------- */

.title-area {
float: left;
width: 520px;
}

.site-title {
font-weight: 700;
font-size: 48px;
font-size: 4.8rem;
font-weight: 700;
line-height: 1;
margin: 0;
text-transform: uppercase;
}

.site-title a,
.site-title a:hover {
color: #000;
}

.site-description {
color: #999;
font-size: 16px;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 2px;
letter-spacing: 0.2rem;
line-height: 1;
margin: 10px 0 0;
margin: 1rem 0 0;
text-transform: uppercase;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
}

.header-image .site-description,
.header-image .site-title a {
display: block;
text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-title a {
background-position: top !important;
float: left;
min-height: 120px;
width: 100%;
}

[eamonmoriarty]

Change

.header-image .site-title a {
background-position: top !important;
float: left;
min-height: 120px;
width: 100%;
}

to

.header-image .site-title a {
background-position: left top !important;
float: left;
min-height: 120px;
width: 100%;
}

---

Eamon Moriarty
EM Dzine

[Author]

Posts